<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>MediaStream Recording</title>
  <meta content="ED" name="w3c-status">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
<style>
    body {
      background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
      background-attachment: fixed;
    }
  </style>
  <link href="https://www.w3.org/TR/mediastream-recording/" rel="canonical">
<style>
table {
  border-collapse: collapse;
  border-left-style: hidden;
  border-right-style: hidden;
  text-align: left;
}
table caption {
  font-weight: bold;
  padding: 3px;
  text-align: left;
}
table td, table th {
  border: 1px solid black;
  padding: 3px;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">MediaStream Recording</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/mediacapture-record/">https://w3c.github.io/mediacapture-record/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/mediastream-recording/">https://www.w3.org/TR/mediastream-recording/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2017/WD-mediastream-recording-20170405/" rel="prev">https://www.w3.org/TR/2017/WD-mediastream-recording-20170405/</a>
     <dd><a href rel="prev"></a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-media-capture@w3.org?subject=%5Bmediastream-recording%5D%20YOUR%20TOPIC%20HERE">public-media-capture@w3.org</a> with subject line “<kbd>[mediastream-recording] <i data-lt>… message topic …</i></kbd>” (<a href="https://lists.w3.org/Archives/Public/public-media-capture/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="82825"><a class="p-name fn u-email email" href="mailto:mcasas@google.com">Miguel Casas-Sanchez</a> (<span class="p-org org">Google Inc.</span>)
     <dt class="editor">Former Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="34604"><span class="p-name fn">Jim Barnett</span> (<span class="p-org org">Genesis</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="40117"><a class="p-name fn u-email email" href="mailto:travis.leithead@microsoft.com">Travis Leithead</a> (<span class="p-org org">Microsoft Corp.</span>)
     <dt>Participate:
     <dd><a href="https://lists.w3.org/Archives/Public/public-webrtc/">Mailing list</a>
     <dd><a href="https://github.com/w3c/mediacapture-record">GitHub repo</a> (<a href="https://github.com/w3c/mediacapture-record/issues/new">new issue</a>, <a href="https://github.com/w3c/mediacapture-record/issues">open issues</a>)
     <dd>
     <dt>Implementation:
     <dd><a href="http://caniuse.com/#feat=mediarecorder">Can I use Media Recording?</a>
     <dd><a href="https://github.com/miguelao/mediacapture-record-implementation-status/blob/master/chromium.md">Chromium Encode Acceleration Support</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines a recording API for use with <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream">MediaStream</a></code>s.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> If you wish to make comments regarding this document, please <a href="mediacapture-record/issues/new">file an issue on the specification repository</a> or send them to <a href="mailto:public-media-capture@w3.org">public-media-capture@w3.org</a> (<a href="mailto:public-media-capture-request@w3.org?subject=subscribe">subscribe</a>, <a href="https://lists.w3.org/Archives/Public/public-media-capture/">archives</a>). </p>
   <p> This document was produced by the <a href="https://www.w3.org/2011/04/webrtc/">Web Real-Time Communications Working Group</a>. </p>
   <p> This document was produced by groups operating under
  the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
  W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/47318/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
  that page also includes instructions for disclosing a patent.
  An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section  6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#overview"><span class="secno">1</span> <span class="content">Overview</span></a>
    <li>
     <a href="#mediarecorder-api"><span class="secno">2</span> <span class="content">Media Recorder API</span></a>
     <ol class="toc">
      <li><a href="#mediarecorder-constructor"><span class="secno">2.1</span> <span class="content">Constructors</span></a>
      <li><a href="#mediarecorder-attributes"><span class="secno">2.2</span> <span class="content">Attributes</span></a>
      <li><a href="#mediarecorder-methods"><span class="secno">2.3</span> <span class="content">Methods</span></a>
      <li><a href="#data-handling"><span class="secno">2.4</span> <span class="content">Data handling</span></a>
      <li>
       <a href="#mediarecorderoptions-section"><span class="secno">2.5</span> <span class="content">MediaRecorderOptions</span></a>
       <ol class="toc">
        <li><a href="#mediarecorderoptions-members"><span class="secno">2.5.1</span> <span class="content">Members</span></a>
       </ol>
      <li>
       <a href="#recordingstate"><span class="secno">2.6</span> <span class="content">RecordingState</span></a>
       <ol class="toc">
        <li><a href="#recordingstate-values"><span class="secno">2.6.1</span> <span class="content">Values</span></a>
       </ol>
     </ol>
    <li>
     <a href="#blobevent-section"><span class="secno">3</span> <span class="content">Blob Event</span></a>
     <ol class="toc">
      <li><a href="#blobevent-constructor"><span class="secno">3.1</span> <span class="content">Constructors</span></a>
      <li><a href="#blobevent-attributes"><span class="secno">3.2</span> <span class="content">Attributes</span></a>
      <li>
       <a href="#blobeventinit"><span class="secno">3.3</span> <span class="content">BlobEventInit</span></a>
       <ol class="toc">
        <li><a href="#blobeventinit-members"><span class="secno">3.3.1</span> <span class="content">Members</span></a>
       </ol>
     </ol>
    <li>
     <a href="#error-handling"><span class="secno">4</span> <span class="content">Error handling</span></a>
     <ol class="toc">
      <li><a href="#error-handling-principles"><span class="secno">4.1</span> <span class="content">General principles</span></a>
      <li>
       <a href="#errorevent-section"><span class="secno">4.2</span> <span class="content">MediaRecorderErrorEvent</span></a>
       <ol class="toc">
        <li><a href="#errorevent-constructor"><span class="secno">4.2.1</span> <span class="content">Constructors</span></a>
        <li><a href="#errorevent-attributes"><span class="secno">4.2.2</span> <span class="content">Attributes</span></a>
        <li><a href="#erroreventinit"><span class="secno">4.2.3</span> <span class="content">MediaRecorderErrorEventInit</span></a>
       </ol>
      <li><a href="#exception-summary"><span class="secno">4.3</span> <span class="content">Exception Summary</span></a>
     </ol>
    <li><a href="#event-summary"><span class="secno">5</span> <span class="content">Event summary</span></a>
    <li>
     <a href="#privacy-and-security"><span class="secno">6</span> <span class="content">Privacy and Security Considerations</span></a>
     <ol class="toc">
      <li><a href="#resource-exhaustion"><span class="secno">6.1</span> <span class="content">Resource exhaustion</span></a>
     </ol>
    <li>
     <a href="#examples"><span class="secno">7</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example1"><span class="secno">7.1</span> <span class="content">Check for <code class="idl"><span>MediaRecorder</span></code> and content types</span></a>
      <li><a href="#example2"><span class="secno">7.2</span> <span class="content">Recording webcam video and audio</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content">Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content">Document conventions</span></a>
      <li><a href="#conformant-algorithms"><span class="secno"></span> <span class="content">Conformant Algorithms</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content">Conformance Classes</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="overview"><span class="secno">1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h2>
   <p>This API attempts to make basic recording very simple, while still allowing for
more complex use cases. In the simplest case, the application instantiates a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder">MediaRecorder</a></code> object, calls <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start">start()</a></code> and then calls <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop">stop()</a></code> or waits
for the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastreamtrack" id="ref-for-mediastreamtrack">MediaStreamTrack</a></code>(s) <a data-link-type="biblio" href="#biblio-getusermedia">[GETUSERMEDIA]</a> to be ended. The contents of the recording will
be made available in the platform’s default encoding via the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-ondataavailable" id="ref-for-dom-mediarecorder-ondataavailable">ondataavailable</a></code> event.  Functions are available to query the platform’s available set of
encodings, and to select the desired ones if the author wishes. The application
can also choose how much data it wants to receive at one time. By default a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob">Blob</a></code> containing the entire recording is returned when the recording
finishes. However the application can choose to receive smaller buffers of data
at regular intervals.</p>
   <h2 class="heading settled" data-level="2" id="mediarecorder-api"><span class="secno">2. </span><span class="content">Media Recorder API</span><a class="self-link" href="#mediarecorder-api"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 <a class="idl-code" data-link-type="constructor" href="#dom-mediarecorder-mediarecorder" id="ref-for-dom-mediarecorder-mediarecorder"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream①"><c- n>MediaStream</c-></a> <dfn class="idl-code" data-dfn-for="MediaRecorder/MediaRecorder(stream, options)" data-dfn-type="argument" data-export id="dom-mediarecorder-mediarecorder-stream-options-stream"><code><c- g>stream</c-></code><a class="self-link" href="#dom-mediarecorder-mediarecorder-stream-options-stream"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediarecorderoptions" id="ref-for-dictdef-mediarecorderoptions"><c- n>MediaRecorderOptions</c-></a> <dfn class="idl-code" data-dfn-for="MediaRecorder/MediaRecorder(stream, options)" data-dfn-type="argument" data-export id="dom-mediarecorder-mediarecorder-stream-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-mediarecorder-mediarecorder-stream-options-options"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediarecorder"><code><c- g>MediaRecorder</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream②"><c- n>MediaStream</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="MediaStream" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream"><c- g>stream</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype"><c- g>mimeType</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-recordingstate" id="ref-for-enumdef-recordingstate"><c- n>RecordingState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="RecordingState" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state"><c- g>state</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onstart" id="ref-for-dom-mediarecorder-onstart"><c- g>onstart</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onstop" id="ref-for-dom-mediarecorder-onstop"><c- g>onstop</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-ondataavailable" id="ref-for-dom-mediarecorder-ondataavailable①"><c- g>ondataavailable</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onpause" id="ref-for-dom-mediarecorder-onpause"><c- g>onpause</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onresume" id="ref-for-dom-mediarecorder-onresume"><c- g>onresume</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onerror" id="ref-for-dom-mediarecorder-onerror"><c- g>onerror</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond"><c- g>videoBitsPerSecond</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond"><c- g>audioBitsPerSecond</c-></a>;

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start①"><c- g>start</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder/start(timeslice), MediaRecorder/start()" data-dfn-type="argument" data-export id="dom-mediarecorder-start-timeslice-timeslice"><code><c- g>timeslice</c-></code></dfn>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop①"><c- g>stop</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-pause" id="ref-for-dom-mediarecorder-pause"><c- g>pause</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-resume" id="ref-for-dom-mediarecorder-resume"><c- g>resume</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-requestdata" id="ref-for-dom-mediarecorder-requestdata"><c- g>requestData</c-></a>();

  <c- b>static</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-istypesupported" id="ref-for-dom-mediarecorder-istypesupported"><c- g>isTypeSupported</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="MediaRecorder/isTypeSupported(type)" data-dfn-type="argument" data-export id="dom-mediarecorder-istypesupported-type-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-mediarecorder-istypesupported-type-type"></a></dfn>);
};
</pre>
   <h3 class="heading settled" data-level="2.1" id="mediarecorder-constructor"><span class="secno">2.1. </span><span class="content">Constructors</span><a class="self-link" href="#mediarecorder-constructor"></a></h3>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="constructor" data-export data-lt="MediaRecorder(stream, options)|MediaRecorder(stream)" id="dom-mediarecorder-mediarecorder"><code>MediaRecorder(MediaStream stream, optional MediaRecorderOptions options)</code></dfn>
    <dd>
     <table class="parameters">
      <tbody>
       <tr>
        <th>Parameter
        <th>Type
        <th>Nullable
        <th>Optional
        <th>Description
       <tr>
        <td class="prmName">stream
        <td class="prmType"><code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream③">MediaStream</a></code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmDesc">The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream④">MediaStream</a></code> to be recorded. This will
        be the value of the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream①">stream</a></code> attribute.
       <tr>
        <td class="prmName">options
        <td class="prmType"><code class="idl"><a data-link-type="idl" href="#dictdef-mediarecorderoptions" id="ref-for-dictdef-mediarecorderoptions①">MediaRecorderOptions</a></code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptTrue"><span aria-label="True" role="img">✔</span>
        <td class="prmDesc">A dictionary of recording options.
     </table>
    <dd>
     When the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-mediarecorder" id="ref-for-dom-mediarecorder-mediarecorder①">MediaRecorder()</a></code> constructor is invoked, the User Agent MUST run the following steps: 
     <ol>
      <li>Let <var>stream</var> be the constructor’s first argument.
      <li>Let <var>options</var> be the constructor’s second argument.
      <li>If invoking <a data-link-type="abstract-op" href="#abstract-opdef-is-type-supported" id="ref-for-abstract-opdef-is-type-supported">is type supported</a> with <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-mimetype" id="ref-for-dom-mediarecorderoptions-mimetype">mimeType</a></code> member as its argument returns false,
    throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror">NotSupportedError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort these steps.
      <li>Let <var>recorder</var> be a newly constructed <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①">MediaRecorder</a></code> object.
      <li>Let <var>recorder</var> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="constrainedmimetype">[[ConstrainedMimeType]]</dfn> internal slot,
    initialized to the value of <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-mimetype" id="ref-for-dom-mediarecorderoptions-mimetype①">mimeType</a></code> member.
      <li>Let <var>recorder</var> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="constrainedbitspersecond">[[ConstrainedBitsPerSecond]]</dfn> internal
    slot, initialized to the value of <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-bitspersecond" id="ref-for-dom-mediarecorderoptions-bitspersecond">bitsPerSecond</a></code> member, if it is present, otherwise <code>undefined</code>.
      <li>Initialize <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream②">stream</a></code> attribute to <var>stream</var>.
      <li>Initialize <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype①">mimeType</a></code> attribute to the
    value of <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedmimetype" id="ref-for-constrainedmimetype">[[ConstrainedMimeType]]</a> slot.
      <li>Initialize <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①">state</a></code> attribute to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive">inactive</a></code>.
      <li>Initialize <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond①">videoBitsPerSecond</a></code> attribute to the value of <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-videobitspersecond" id="ref-for-dom-mediarecorderoptions-videobitspersecond">videoBitsPerSecond</a></code> member, if it is
    present. Otherwise, choose a target value the User Agent deems reasonable
    for video.
      <li>Initialize <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond①">audioBitsPerSecond</a></code> attribute to the value of <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-audiobitspersecond" id="ref-for-dom-mediarecorderoptions-audiobitspersecond">audioBitsPerSecond</a></code> member, if it is
    present. Otherwise, choose a target value the User Agent deems reasonable
    for audio.
      <li>If <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond">[[ConstrainedBitsPerSecond]]</a> slot is not <code>undefined</code>, set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond②">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond②">audioBitsPerSecond</a></code> attributes to values the User Agent deems reasonable
    for the respective media types, such that the sum of <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond③">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond③">audioBitsPerSecond</a></code> is close to the value of <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond①">[[ConstrainedBitsPerSecond]]</a> slot.
      <li>Return <var>recorder</var>.
     </ol>
   </dl>
   <h3 class="heading settled" data-level="2.2" id="mediarecorder-attributes"><span class="secno">2.2. </span><span class="content">Attributes</span><a class="self-link" href="#mediarecorder-attributes"></a></h3>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-stream"><code>stream</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream⑤">MediaStream</a>, readonly</span>
    <dd>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream⑥">MediaStream</a></code> <a data-link-type="biblio" href="#biblio-getusermedia">[GETUSERMEDIA]</a> to be recorded.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-mimetype"><code>mimeType</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②">DOMString</a>, readonly</span>
    <dd>
     The MIME type <a data-link-type="biblio" href="#biblio-rfc2046">[RFC2046]</a> used by the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder②">MediaRecorder</a></code> object.
  The User Agent SHOULD be able to play back any of the MIME types it supports
  for recording. For example, it should be able to display a video recording in
  the HTML &lt;video> tag. 
     <div class="note" role="note"> <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype②">mimeType</a></code> specifies the media type and
  container format for the recording via a type/subtype combination, with the
  codecs and/or profiles parameters <a data-link-type="biblio" href="#biblio-rfc6381">[RFC6381]</a> specified where ambiguity might
  arise. Individual codecs might have further optional specific parameters. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-state"><code>state</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-recordingstate" id="ref-for-enumdef-recordingstate①">RecordingState</a>, readonly</span>
    <dd>The current state of the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder③">MediaRecorder</a></code> object. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-onstart"><code>onstart</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑥">EventHandler</a></span>
    <dd>Called to handle the <a data-link-type="dfn" href="#start" id="ref-for-start">start</a> event.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-onstop"><code>onstop</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑦">EventHandler</a></span>
    <dd>Called to handle the <a data-link-type="dfn" href="#stop" id="ref-for-stop">stop</a> event.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-ondataavailable"><code>ondataavailable</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑧">EventHandler</a></span>
    <dd>Called to handle the <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable">dataavailable</a> event. The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①">Blob</a></code> of recorded
  data is contained in this event and can be accessed via its <code class="idl"><a data-link-type="idl" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data">data</a></code> attribute.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-onpause"><code>onpause</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑨">EventHandler</a></span>
    <dd>Called to handle the <a data-link-type="dfn" href="#pause" id="ref-for-pause">pause</a> event.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-onresume"><code>onresume</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①⓪">EventHandler</a></span>
    <dd>Called to handle the <a data-link-type="dfn" href="#resume" id="ref-for-resume">resume</a> event.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-onerror"><code>onerror</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①">EventHandler</a></span>
    <dd>Called to handle a <code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent">MediaRecorderErrorEvent</a></code>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-videobitspersecond"><code>videoBitsPerSecond</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③">unsigned long</a>, readonly</span>
    <dd>The target bitrate used to encode video tracks.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="attribute" data-export id="dom-mediarecorder-audiobitspersecond"><code>audioBitsPerSecond</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long④">unsigned long</a>, readonly</span>
    <dd>The target bitrate used to encode audio tracks.
   </dl>
   <h3 class="heading settled" data-level="2.3" id="mediarecorder-methods"><span class="secno">2.3. </span><span class="content">Methods</span><a class="self-link" href="#mediarecorder-methods"></a></h3>
   <dl class="domintro">
    <div class="note" role="note"> For historical reasons, the following methods alter <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state②">state</a></code> synchronously
    and fire events asynchronously. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export data-lt="start(timeslice)|start()" id="dom-mediarecorder-start"><code>start(optional unsigned long timeslice)</code></dfn>
    <dd>
      When a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder④">MediaRecorder</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start②">start()</a></code> method is invoked, the UA
  MUST run the following steps: 
     <ol>
      <li>Let <var>recorder</var> be the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder⑤">MediaRecorder</a></code> object on which the method was
    invoked.
      <li>Let <var>timeslice</var> be the method’s first argument, if provided,
    or <code>undefined</code>. 
      <li>Let <var>stream</var> be the value of <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream③">stream</a></code> attribute.
      <li>Let <var>tracks</var> be the set of <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#idl-def-MediaStreamTrackState.live" id="ref-for-idl-def-MediaStreamTrackState.live">live</a></code> tracks in <var>stream</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/mediacapture-streams/#track-set" id="ref-for-track-set">track set</a>.
      <li>If the value of <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state③">state</a></code> attribute is not <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive①">inactive</a></code>,
    throw an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> and abort these steps.
      <li>If the <a data-link-type="dfn" href="https://www.w3.org/TR/webrtc-identity/#isolated-media-streams" id="ref-for-isolated-media-streams">isolation properties</a> of <var>stream</var> disallow access from <var>recorder</var>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror">SecurityError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code> and abort these
    steps.
      <li>If <var>stream</var> is <a data-link-type="dfn" href="https://www.w3.org/TR/mediacapture-streams/#stream-inactive" id="ref-for-stream-inactive">inactive</a>, throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror①">NotSupportedError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code> and abort these steps.
      <li>
       If the <a data-link-type="dfn" href="#constrainedmimetype" id="ref-for-constrainedmimetype①">[[ConstrainedMimeType]]</a> slot specifies a media type,
    container, or codec, then run the following sub steps: 
       <ol>
        <li>Constrain the configuration of <var>recorder</var> to the media type,
      container, and codec specified in the <a data-link-type="dfn" href="#constrainedmimetype" id="ref-for-constrainedmimetype②">[[ConstrainedMimeType]]</a> slot.
        <li>For each track in <var>tracks</var>, if the User Agent cannot record the track
      using the current configuration, then throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror②">NotSupportedError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code> and abort all steps.
       </ol>
      <li>If <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond②">[[ConstrainedBitsPerSecond]]</a> slot is not <code>undefined</code>, set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond④">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond④">audioBitsPerSecond</a></code> attributes to values the User Agent deems reasonable
    for the respective media types, for recording all tracks in <var>tracks</var>, such
    that the sum of <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond⑤">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond⑤">audioBitsPerSecond</a></code> is close
    to the value of <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond③">[[ConstrainedBitsPerSecond]]</a> slot.
      <li>Let <var>videoBitrate</var> be the value of <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond⑥">videoBitsPerSecond</a></code> attribute, and constrain the configuration of <var>recorder</var> to target an
    aggregate bitrate of <var>videoBitrate</var> bits per second for all video tracks <var>recorder</var> will be recording. <var>videoBitrate</var> is a hint for the encoder and
    the value might be surpassed, not achieved, or only be achieved over a long
    period of time.
      <li>Let <var>audioBitrate</var> be the value of <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond⑥">audioBitsPerSecond</a></code> attribute, and constrain the configuration of <var>recorder</var> to target an
    aggregate bitrate of <var>audioBitrate</var> bits per second for all audio tracks <var>recorder</var> will be recording. <var>audioBitrate</var> is a hint for the encoder and
    the value might be surpassed, not achieved, or only be achieved over a long
    period of time.
      <li>
       Set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state④">state</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording">recording</a></code>, and run the following steps
    in parallel: 
       <ol>
        <li>
         If the container and codecs to use for the recording have not yet been
      fully specified, the User Agent specifies them in <var>recorder</var>’s current
      configuration. The User Agent MAY take the sources of the tracks in <var>tracks</var> into account when deciding which container and codecs to
      use. 
         <div class="note" role="note"> By looking at the sources of the tracks in <var>tracks</var> when recording
        starts, the User Agent could choose a configuration that avoids
        re-encoding track content. For example, if the MediaStreamTrack is a
        remote track sourced from an RTCPeerConnection, the User Agent could
        pick the same codec as is used for the MediaStreamTrack’s RTP stream,
        should it be known. However, if the codec of the RTP stream changes
        while recording, the User Agent has to be prepared to re-encode it to
        avoid interruptions. </div>
        <li>
         Start recording all tracks in <var>tracks</var> using the <var>recorder</var>’s current
      configuration and gather the data into a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob②">Blob</a></code> <var>blob</var>. Queue a
      task, using the DOM manipulation task source, to run the following steps: 
         <ol>
          <li>Let <var>extendedMimeType</var> be the value of <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedmimetype" id="ref-for-constrainedmimetype③">[[ConstrainedMimeType]]</a> slot.
          <li>Modify <var>extendedMimeType</var> by adding media type, subtype and codecs
        parameter reflecting the configuration used by the MediaRecorder to
        record all tracks in <var>tracks</var>, if not already present. This MAY include
        the profiles parameter <a data-link-type="biblio" href="#biblio-rfc6381">[RFC6381]</a> or further codec-specific
        parameters.
          <li>Set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype③">mimeType</a></code> attribute to <var>extendedMimeType</var>.
          <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">Fire an event</a> named <a data-link-type="dfn" href="#start" id="ref-for-start①">start</a> at <var>recorder</var>.
         </ol>
        <li>
         If at any point <var>stream</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/webrtc-identity/#isolated-media-streams" id="ref-for-isolated-media-streams①">isolation properties</a> change so
      that <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder⑥">MediaRecorder</a></code> is no longer allowed access to it, the UA MUST
      immediately stop gathering data, discard any data that it has gathered,
      and queue a task, using the DOM manipulation task source, that runs the
      following steps: 
         <ol>
          <li><a data-link-type="abstract-op" href="#abstract-opdef-inactivate-the-recorder" id="ref-for-abstract-opdef-inactivate-the-recorder">Inactivate the recorder</a> with <var>recorder</var>.
          <li><a data-link-type="dfn" href="#fire-an-error-event" id="ref-for-fire-an-error-event">Fire an error event</a> named <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror①">SecurityError</a></code> at <var>recorder</var>.
          <li><a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event">Fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable①">dataavailable</a> at <var>recorder</var> with <var>blob</var>.
          <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">Fire an event</a> named <a data-link-type="dfn" href="#stop" id="ref-for-stop①">stop</a> at <var>recorder</var>.
         </ol>
        <li>
         If at any point, a track is added to or removed from <var>stream</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/mediacapture-streams/#track-set" id="ref-for-track-set①">track set</a>, the UA MUST immediately stop gathering data, discard any
      data that it has gathered, and queue a task, using the DOM manipulation
      task source, that runs the following steps: 
         <ol>
          <li><a data-link-type="abstract-op" href="#abstract-opdef-inactivate-the-recorder" id="ref-for-abstract-opdef-inactivate-the-recorder①">Inactivate the recorder</a> with <var>recorder</var>.
          <li><a data-link-type="dfn" href="#fire-an-error-event" id="ref-for-fire-an-error-event①">Fire an error event</a> named <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidmodificationerror" id="ref-for-invalidmodificationerror">InvalidModificationError</a></code> at <var>recorder</var>.
          <li><a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event①">Fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable②">dataavailable</a> at <var>recorder</var> with <var>blob</var>.
          <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire②">Fire an event</a> named <a data-link-type="dfn" href="#stop" id="ref-for-stop②">stop</a> at <var>recorder</var>.
         </ol>
        <li>
         If the UA at any point is unable to continue gathering data for
      reasons other than <a data-link-type="dfn" href="https://www.w3.org/TR/webrtc-identity/#isolated-media-streams" id="ref-for-isolated-media-streams②">isolation properties</a> or <var>stream</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/mediacapture-streams/#track-set" id="ref-for-track-set②">track set</a>, it MUST stop gathering data, and queue a task, using the
      DOM manipulation task source, that runs the following steps: 
         <ol>
          <li><a data-link-type="abstract-op" href="#abstract-opdef-inactivate-the-recorder" id="ref-for-abstract-opdef-inactivate-the-recorder②">Inactivate the recorder</a> with <var>recorder</var>.
          <li><a data-link-type="dfn" href="#fire-an-error-event" id="ref-for-fire-an-error-event②">Fire an error event</a> named <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#unknownerror" id="ref-for-unknownerror">UnknownError</a></code> at <var>recorder</var>.
          <li><a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event②">Fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable③">dataavailable</a> at <var>recorder</var> with <var>blob</var>.
          <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire③">Fire an event</a> named <a data-link-type="dfn" href="#stop" id="ref-for-stop③">stop</a> at <var>recorder</var>.
         </ol>
        <li>
         If <var>timeslice</var> is not <code>undefined</code>, then once a
      minimum of <var>timeslice</var> milliseconds of data have been collected,
      or some minimum time slice imposed by the UA, whichever is greater, start
      gathering data into a new <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob③">Blob</a></code> <var>blob</var>, and queue a task,
      using the DOM manipulation task source, that <a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event③">fires a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable④">dataavailable</a> at <var>recorder</var> with <var>blob</var>. 
         <p>Note that an <code>undefined</code> value of <var>timeslice</var> will
      be understood as the largest <code>unsigned long</code> value.</p>
        <p></p>
        <li>
         If all recorded tracks become <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#idl-def-MediaStreamTrackState.ended" id="ref-for-idl-def-MediaStreamTrackState.ended">ended</a></code>, then stop gathering data, and
      queue a task, using the DOM manipulation task source, that runs the
      following steps: 
         <ol>
          <li><a data-link-type="abstract-op" href="#abstract-opdef-inactivate-the-recorder" id="ref-for-abstract-opdef-inactivate-the-recorder③">Inactivate the recorder</a> with <var>recorder</var>.
          <li><a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event④">Fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable⑤">dataavailable</a> at <var>recorder</var> with <var>blob</var>.
          <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire④">Fire an event</a> named <a data-link-type="dfn" href="#stop" id="ref-for-stop④">stop</a> at <var>recorder</var>.
         </ol>
       </ol>
     </ol>
     <p>Note that <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop②">stop()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-requestdata" id="ref-for-dom-mediarecorder-requestdata①">requestData()</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-pause" id="ref-for-dom-mediarecorder-pause①">pause()</a></code> also affect the
  recording behavior.</p>
     <p>The UA MUST record <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream④">stream</a></code> in such a way that the original
  Tracks can be retrieved at playback time. When multiple <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob④">Blob</a></code>s are returned
  (because of <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start-timeslice-timeslice" id="ref-for-dom-mediarecorder-start-timeslice-timeslice">timeslice</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-requestdata" id="ref-for-dom-mediarecorder-requestdata②">requestData()</a></code>), the individual Blobs need not
  be playable, but the combination of all the Blobs from a completed recording
  MUST be playable.</p>
     <p> If any Track within the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream⑦">MediaStream</a></code> is <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#dom-mediastreamtrack-muted" id="ref-for-dom-mediastreamtrack-muted">muted</a></code> or not <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#dom-mediastreamtrack-enabled" id="ref-for-dom-mediastreamtrack-enabled">enabled</a></code> at
  any time, the UA will only record black frames or silence since that is the
  content produced by the Track.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-type="abstract-op" data-export id="abstract-opdef-inactivate-the-recorder">Inactivate the recorder</dfn> algorithm given a <var>recorder</var>, is as follows:</p>
     <ol>
      <li>Set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype④">mimeType</a></code> attribute to the value of the <a data-link-type="dfn" href="#constrainedmimetype" id="ref-for-constrainedmimetype④">[[ConstrainedMimeType]]</a> slot.
      <li>Set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state⑤">state</a></code> attribute to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive②">inactive</a></code>.
      <li>If <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond④">[[ConstrainedBitsPerSecond]]</a> slot is not <code>undefined</code>, set <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond⑦">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond⑦">audioBitsPerSecond</a></code> attributes to values the User Agent deems reasonable
    for the respective media types, such that the sum of <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond⑧">videoBitsPerSecond</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond⑧">audioBitsPerSecond</a></code> is close to the value of <var>recorder</var>’s <a data-link-type="dfn" href="#constrainedbitspersecond" id="ref-for-constrainedbitspersecond⑤">[[ConstrainedBitsPerSecond]]</a> slot.
     </ol>
     <table class="parameters">
      <tbody>
       <tr>
        <th>Parameter
        <th>Type
        <th>Nullable
        <th>Optional
        <th>Description
       <tr>
        <td class="prmName">timeslice
        <td class="prmType"><code>unsigned long</code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptTrue"><span aria-label="True" role="img">✔</span>
        <td class="prmDesc">The minimum number of milliseconds of data
        to return in a single Blob.
     </table>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export id="dom-mediarecorder-stop"><code>stop()</code></dfn>
    <dd>
      When a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder⑦">MediaRecorder</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop③">stop()</a></code> method is invoked, the UA
  MUST run the following steps: 
     <ol>
      <li>Let <var>recorder</var> be the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder⑧">MediaRecorder</a></code> object on which the method was
    invoked.
      <li>If <var>recorder</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state⑥">state</a></code> attribute is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive③">inactive</a></code>, abort these
    steps.
      <li><a data-link-type="abstract-op" href="#abstract-opdef-inactivate-the-recorder" id="ref-for-abstract-opdef-inactivate-the-recorder④">Inactivate the recorder</a> with <var>recorder</var>.
      <li>
       Queue a task, using the DOM manipulation task source, that runs the
    following steps: 
       <ol>
        <li>Stop gathering data.
        <li>Let <var>blob</var> be the Blob of collected data so far, then <a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event⑤">fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable⑥">dataavailable</a> at <var>recorder</var> with <var>blob</var>.
        <li><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑤">Fire an event</a> named <a data-link-type="dfn" href="#stop" id="ref-for-stop⑤">stop</a> at <var>recorder</var>.
       </ol>
      <li>return <code>undefined</code>.
     </ol>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export id="dom-mediarecorder-pause"><code>pause()</code></dfn>
    <dd>
      When a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder⑨">MediaRecorder</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-pause" id="ref-for-dom-mediarecorder-pause②">pause()</a></code> method is invoked, the UA
  MUST run the following steps: 
     <ol>
      <li>If <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state⑦">state</a></code> is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive④">inactive</a></code>, throw an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code> and abort these steps.
      <li>If <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state⑧">state</a></code> is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-paused" id="ref-for-dom-recordingstate-paused">paused</a></code>, abort these steps.
      <li>
       Set <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state⑨">state</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-paused" id="ref-for-dom-recordingstate-paused①">paused</a></code>, and queue a
    task, using the DOM manipulation task source, that runs the following steps: 
       <ol>
        <li>Stop gathering data into <var>blob</var> (but keep it
      available so that recording can be resumed in the future).
        <li>Let <var>target</var> be the MediaRecorder context object. <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑥">Fire an event</a> named <a data-link-type="dfn" href="#pause" id="ref-for-pause①">pause</a> at <var>target</var>.
       </ol>
      <li>return <code>undefined</code>.
     </ol>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export id="dom-mediarecorder-resume"><code>resume()</code></dfn>
    <dd>
      When a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①⓪">MediaRecorder</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-resume" id="ref-for-dom-mediarecorder-resume①">resume()</a></code> method is invoked, the
  UA MUST run the following steps: 
     <ol>
      <li>If <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①⓪">state</a></code> is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive⑤">inactive</a></code>, throw an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑥">DOMException</a></code> and abort these steps.
      <li>If <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①①">state</a></code> is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording①">recording</a></code>, abort these steps.
      <li>
       Set <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①②">state</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording②">recording</a></code>, and queue a
    task, using the DOM manipulation task source, that runs the following steps: 
       <ol>
        <li>Resume (or continue) gathering data into the current <var>blob</var>. 
        <li>Let <var>target</var> be the MediaRecorder context object. <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑦">Fire
      an event</a> named <a data-link-type="dfn" href="#resume" id="ref-for-resume①">resume</a> at <var>target</var>.
       </ol>
      <li>return <code>undefined</code>.
     </ol>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export id="dom-mediarecorder-requestdata"><code>requestData()</code></dfn>
    <dd>
      When a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①①">MediaRecorder</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-requestdata" id="ref-for-dom-mediarecorder-requestdata③">requestData()</a></code> method is invoked,
  the UA MUST run the following steps: 
     <ol>
      <li>
       If <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①③">state</a></code> is <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive⑥">inactive</a></code> throw an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror③">InvalidStateError</a></code> <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑦">DOMException</a></code> and terminate these steps. Otherwise the UA MUST queue a
    task, using the DOM manipulation task source, that runs the following steps: 
       <ol>
        <li>Let <var>blob</var> be the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑤">Blob</a></code> of collected data so far and
      let <var>target</var> be the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①②">MediaRecorder</a></code> context object, then <a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event⑥">fire a blob event</a> named <a data-link-type="dfn" href="#dataavailable" id="ref-for-dataavailable⑦">dataavailable</a> at <var>target</var> with <var>blob</var>.
      (Note that <var>blob</var> will be empty if no data has been gathered
      yet.)
        <li>Create a new Blob and gather subsequent data into it.
       </ol>
      <li>return <code>undefined</code>.
     </ol>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorder" data-dfn-type="method" data-export data-lt="isTypeSupported(type)" id="dom-mediarecorder-istypesupported"><code>isTypeSupported(DOMString type) </code></dfn>
    <dd>
      Check to see whether a <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①③">MediaRecorder</a></code> can record in a specified MIME type.
  If true is returned from this method, it only indicates that the <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①④">MediaRecorder</a></code> implementation is capable of recording <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑥">Blob</a></code> objects for
  the specified MIME type. Recording may still fail if sufficient resources are
  not available to support the concrete media encoding. When this method is
  invoked, the User Agent must return the result of <a data-link-type="abstract-op" href="#abstract-opdef-is-type-supported" id="ref-for-abstract-opdef-is-type-supported①">is type supported</a>,
  given the method’s first argument. 
     <table class="parameters">
      <tbody>
       <tr>
        <th>Parameter
        <th>Type
        <th>Nullable
        <th>Optional
        <th>Description
       <tr>
        <td class="prmName">type
        <td class="prmType"><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a></code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmDesc"> A <a href="https://tools.ietf.org/html/rfc2046">MIME Type</a>,
          including parameters when needed, specifying a container and/or
          codec formats for recording. 
     </table>
    <dd class="algorithm" data-algorithm="is type supported">
     The <dfn class="dfn-paneled" data-dfn-type="abstract-op" data-export id="abstract-opdef-is-type-supported">is type supported</dfn> algorithm consists of the following steps. 
     <ol>
      <li>Let <var>type</var> be the algorithm’s argument.
      <li>If <var>type</var> is an empty string, then return true (note that this case is
    essentially equivalent to leaving up to the UA the choice of both container
    and codecs).
      <li>If <var>type</var> does not contain a valid MIME type string, then return false. 
      <li>If <var>type</var> contains a media type or media subtype that the MediaRecorder
    does not support, then return false.
      <li>If <var>type</var> contains a media container that the MediaRecorder does not
    support, then return false.
      <li>If <var>type</var> contains more than one audio codec, or more than one video
    codec, then return false.
      <li>If <var>type</var> contains a codec that the MediaRecorder does not support, then
    return false.
      <li>If the MediaRecorder does not support the specified combination of media
    type/subtype, codecs and container then return false.
      <li>Return true.
     </ol>
   </dl>
   <h3 class="heading settled" data-level="2.4" id="data-handling"><span class="secno">2.4. </span><span class="content">Data handling</span><a class="self-link" href="#data-handling"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="to-fire-a-blob-event">To fire a blob event</dfn> with a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑦">Blob</a></code> <var>blob</var> means to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑧">fire an event</a> at <var>target</var> using a <code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent">BlobEvent</a></code> with
its <code class="idl"><a data-link-type="idl" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data①">data</a></code> attribute initialized to <var>blob</var>.</p>
   <div class="note" role="note"> Usually <var>blob</var> will be the data gathered by the UA after the
  last transition to <code class="idl"><a data-link-type="idl" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording③">recording</a></code> <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①④">state</a></code>. </div>
   <h3 class="heading settled" data-level="2.5" id="mediarecorderoptions-section"><span class="secno">2.5. </span><span class="content">MediaRecorderOptions</span><a class="self-link" href="#mediarecorderoptions-section"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediarecorderoptions"><code><c- g>MediaRecorderOptions</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediarecorderoptions-mimetype" id="ref-for-dom-mediarecorderoptions-mimetype②"><c- g>mimeType</c-></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑤"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-audiobitspersecond" id="ref-for-dom-mediarecorderoptions-audiobitspersecond①"><c- g>audioBitsPerSecond</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑥"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-videobitspersecond" id="ref-for-dom-mediarecorderoptions-videobitspersecond①"><c- g>videoBitsPerSecond</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑦"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-bitspersecond" id="ref-for-dom-mediarecorderoptions-bitspersecond①"><c- g>bitsPerSecond</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.5.1" id="mediarecorderoptions-members"><span class="secno">2.5.1. </span><span class="content">Members</span><a class="self-link" href="#mediarecorderoptions-members"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderOptions" data-dfn-type="dict-member" data-export id="dom-mediarecorderoptions-mimetype"><code>mimeType</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤">DOMString</a>, defaulting to <code>""</code></span>
    <dd>
     The container and codec format(s) <a data-link-type="biblio" href="#biblio-rfc2046">[RFC2046]</a> for the recording, which
  may include any parameters that are defined for the format. 
     <div class="note" role="note"> <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-mimetype" id="ref-for-dom-mediarecorderoptions-mimetype③">mimeType</a></code> specifies the media
  type and container format for the recording via a type/subtype
  combination, with the codecs and/or profiles parameters <a data-link-type="biblio" href="#biblio-rfc6381">[RFC6381]</a> specified where ambiguity might arise. Individual codecs might have
  further optional or mandatory specific parameters. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderOptions" data-dfn-type="dict-member" data-export id="dom-mediarecorderoptions-audiobitspersecond"><code>audioBitsPerSecond</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑧">unsigned long</a></span>
    <dd>Aggregate target bits per second for encoding of the Audio track(s), if
  any.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderOptions" data-dfn-type="dict-member" data-export id="dom-mediarecorderoptions-videobitspersecond"><code>videoBitsPerSecond</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑨">unsigned long</a></span>
    <dd>Aggregate target bits per second for encoding of the Video track(s), if
  any.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderOptions" data-dfn-type="dict-member" data-export id="dom-mediarecorderoptions-bitspersecond"><code>bitsPerSecond</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①⓪">unsigned long</a></span>
    <dd> Aggregate target bits per second for encoding of all Video and Audio
  Track(s) present. This member overrides either <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-audiobitspersecond" id="ref-for-dom-mediarecorderoptions-audiobitspersecond②">audioBitsPerSecond</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-mediarecorderoptions-videobitspersecond" id="ref-for-dom-mediarecorderoptions-videobitspersecond②">videoBitsPerSecond</a></code> if present, and might be
  distributed among the present track encoders as the UA sees fit.
   </dl>
   <h3 class="heading settled" data-level="2.6" id="recordingstate"><span class="secno">2.6. </span><span class="content">RecordingState</span><a class="self-link" href="#recordingstate"></a></h3>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-recordingstate"><code><c- g>RecordingState</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive⑦"><c- s>"inactive"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording④"><c- s>"recording"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-paused" id="ref-for-dom-recordingstate-paused②"><c- s>"paused"</c-></a>
};
</pre>
   <h4 class="heading settled" data-level="2.6.1" id="recordingstate-values"><span class="secno">2.6.1. </span><span class="content">Values</span><a class="self-link" href="#recordingstate-values"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="RecordingState" data-dfn-type="enum-value" data-export data-lt="&quot;inactive&quot;|inactive" id="dom-recordingstate-inactive"><code>inactive</code></dfn>
    <dd>Recording is not occuring: Either it has not been started or it has been
  stopped.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="RecordingState" data-dfn-type="enum-value" data-export data-lt="&quot;recording&quot;|recording" id="dom-recordingstate-recording"><code>recording</code></dfn>
    <dd>Recording has been started and the UA is capturing data.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="RecordingState" data-dfn-type="enum-value" data-export data-lt="&quot;paused&quot;|paused" id="dom-recordingstate-paused"><code>paused</code></dfn>
    <dd>Recording has been started, then paused, and not yet stopped or resumed.
   </dl>
   <h2 class="heading settled" data-level="3" id="blobevent-section"><span class="secno">3. </span><span class="content">Blob Event</span><a class="self-link" href="#blobevent-section"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="constructor" href="#dom-blobevent-blobevent" id="ref-for-dom-blobevent-blobevent"><c- g>Constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="BlobEvent/BlobEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-blobevent-blobevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-blobevent-blobevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-blobeventinit" id="ref-for-dictdef-blobeventinit"><c- n>BlobEventInit</c-></a> <dfn class="idl-code" data-dfn-for="BlobEvent/BlobEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-blobevent-blobevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-blobevent-blobevent-type-eventinitdict-eventinitdict"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="blobevent"><code><c- g>BlobEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑧"><c- n>Blob</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Blob" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data②"><c- g>data</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-blobevent-timecode" id="ref-for-dom-blobevent-timecode"><c- g>timecode</c-></a>;
};
</pre>
   <h3 class="heading settled" data-level="3.1" id="blobevent-constructor"><span class="secno">3.1. </span><span class="content">Constructors</span><a class="self-link" href="#blobevent-constructor"></a></h3>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BlobEvent" data-dfn-type="constructor" data-export data-lt="BlobEvent(type, eventInitDict)" id="dom-blobevent-blobevent"><code>BlobEvent(DOMString type, BlobEventInit eventInitDict)</code></dfn>
    <dd>
   </dl>
   <h3 class="heading settled" data-level="3.2" id="blobevent-attributes"><span class="secno">3.2. </span><span class="content">Attributes</span><a class="self-link" href="#blobevent-attributes"></a></h3>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BlobEvent" data-dfn-type="attribute" data-export id="dom-blobevent-data"><code>data</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑨">Blob</a>, readonly</span>
    <dd>The encoded <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①⓪">Blob</a></code> whose <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-type" id="ref-for-dfn-type">type</a></code> attribute indicates the
  encoding of the blob data. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BlobEvent" data-dfn-type="attribute" data-export id="dom-blobevent-timecode"><code>timecode</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①">DOMHighResTimeStamp</a>, readonly</span>
    <dd>The difference between the timestamp of the first chunk in <code class="idl"><a data-link-type="idl" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data③">data</a></code> and the timestamp of the first chunk in the first <code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent①">BlobEvent</a></code> produced by this recorder as a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp②">DOMHighResTimeStamp</a></code> <a data-link-type="biblio" href="#biblio-hr-time">[HR-TIME]</a>.  Note that the <code class="idl"><a data-link-type="idl" href="#dom-blobevent-timecode" id="ref-for-dom-blobevent-timecode①">timecode</a></code> in the first produced <code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent②">BlobEvent</a></code> does not need to be zero. 
   </dl>
   <h3 class="heading settled" data-level="3.3" id="blobeventinit"><span class="secno">3.3. </span><span class="content">BlobEventInit</span><a class="self-link" href="#blobeventinit"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-blobeventinit"><code><c- g>BlobEventInit</c-></code></dfn> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①①"><c- n>Blob</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="Blob " href="#dom-blobeventinit-data" id="ref-for-dom-blobeventinit-data"><c- g>data</c-></a>;
  <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp③"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMHighResTimeStamp " href="#dom-blobeventinit-timecode" id="ref-for-dom-blobeventinit-timecode"><c- g>timecode</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="3.3.1" id="blobeventinit-members"><span class="secno">3.3.1. </span><span class="content">Members</span><a class="self-link" href="#blobeventinit-members"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BlobEventInit" data-dfn-type="dict-member" data-export id="dom-blobeventinit-data"><code>data</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①②">Blob</a></span>
    <dd>A <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①③">Blob</a></code> object containing the data to deliver via <code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent③">BlobEvent</a></code>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BlobEventInit" data-dfn-type="dict-member" data-export id="dom-blobeventinit-timecode"><code>timecode</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp④">DOMHighResTimeStamp</a></span>
    <dd>The timecode to be used in initializing <code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent④">BlobEvent</a></code>.
   </dl>
   <h2 class="heading settled" data-level="4" id="error-handling"><span class="secno">4. </span><span class="content">Error handling</span><a class="self-link" href="#error-handling"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="error-handling-principles"><span class="secno">4.1. </span><span class="content">General principles</span><a class="self-link" href="#error-handling-principles"></a></h3>
    <em>This section is non-normative.</em> 
   <p>The UA will throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑧">DOMException</a></code> when the error can be detected at the time
that the call is made. In all other cases the UA will <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑨">fire an event</a> named <code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent①">MediaRecorderErrorEvent</a></code>.  If recording has been started and not yet stopped
when the error occurs, let <var>blob</var> be the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①④">Blob</a></code> of collected data so
far; after raising the error, the UA will <a href="#to-fire-a-blob-event" id="ref-for-to-fire-a-blob-event⑦">fire a
dataavailable event</a> with <var>blob</var>; immediately after the UA will then <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①⓪">fire an event</a> named <code>stop</code>.
The UA may set platform-specific limits, such as those for the minimum and
maximum <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①⑤">Blob</a></code> size that it will support, or the number of <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastreamtrack" id="ref-for-mediastreamtrack①">MediaStreamTrack</a></code>s it will record at once.
It will signal a fatal error if these limits are exceeded.</p>
   <h3 class="heading settled" data-level="4.2" id="errorevent-section"><span class="secno">4.2. </span><span class="content">MediaRecorderErrorEvent</span><a class="self-link" href="#errorevent-section"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent②">MediaRecorderErrorEvent</a></code> interface is defined for cases when an event is
raised that was caused by an error.</p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="fire an error event" data-noexport id="fire-an-error-event">To fire an error event</dfn> named <var>e</var> with a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑨">DOMException</a></code> named <var>error</var> means that an
event with the name <var>e</var>, which does not bubble (except where otherwise
stated) and is not cancelable (except where otherwise stated), and which uses
the <code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent③">MediaRecorderErrorEvent</a></code> interface with the <code class="idl"><a data-link-type="idl" href="#dom-mediarecordererrorevent-error" id="ref-for-dom-mediarecordererrorevent-error">error</a></code> attribute set to <var>error</var>, must be
created and <a href="https://dom.spec.whatwg.org/#concept-event-dispatch">dispatched</a> at
the given target.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediarecordererroreventinit"><code><c- g>MediaRecorderErrorEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⓪"><c- n>DOMException</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMException " href="#dom-mediarecordererroreventinit-error" id="ref-for-dom-mediarecordererroreventinit-error"><c- g>error</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="constructor" href="#dom-mediarecordererrorevent-mediarecordererrorevent" id="ref-for-dom-mediarecordererrorevent-mediarecordererrorevent"><c- g>Constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="MediaRecorderErrorEvent/MediaRecorderErrorEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-mediarecordererroreventinit" id="ref-for-dictdef-mediarecordererroreventinit"><c- n>MediaRecorderErrorEventInit</c-></a> <dfn class="idl-code" data-dfn-for="MediaRecorderErrorEvent/MediaRecorderErrorEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-eventinitdict"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediarecordererrorevent"><code><c- g>MediaRecorderErrorEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①①"><c- n>DOMException</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMException" href="#dom-mediarecordererrorevent-error" id="ref-for-dom-mediarecordererrorevent-error①"><c- g>error</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="4.2.1" id="errorevent-constructor"><span class="secno">4.2.1. </span><span class="content">Constructors</span><a class="self-link" href="#errorevent-constructor"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderErrorEvent" data-dfn-type="constructor" data-export data-lt="MediaRecorderErrorEvent(type, eventInitDict)" id="dom-mediarecordererrorevent-mediarecordererrorevent"><code>MediaRecorderErrorEvent(DOMString type, MediaRecorderErrorEventInit eventInitDict)</code></dfn>
    <dd>
      Constructs a new <code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent④">MediaRecorderErrorEvent</a></code>. 
     <table class="parameters">
      <tbody>
       <tr>
        <th>Parameter
        <th>Type
        <th>Nullable
        <th>Optional
        <th>Description
       <tr>
        <td class="prmName">type
        <td class="prmType"><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧">DOMString</a></code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmDesc">
       <tr>
        <td class="prmName">eventInitDict
        <td class="prmType"><code class="idl"><a data-link-type="idl" href="#dictdef-mediarecordererroreventinit" id="ref-for-dictdef-mediarecordererroreventinit①">MediaRecorderErrorEventInit</a></code>
        <td class="prmNullFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmOptFalse"><span aria-label="False" role="img">✘</span>
        <td class="prmDesc">
     </table>
   </dl>
   <h4 class="heading settled" data-level="4.2.2" id="errorevent-attributes"><span class="secno">4.2.2. </span><span class="content">Attributes</span><a class="self-link" href="#errorevent-attributes"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderErrorEvent" data-dfn-type="attribute" data-export id="dom-mediarecordererrorevent-error"><code>error</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①②">DOMException</a>, readonly</span>
    <dd>The DOMException error that triggered the event.
   </dl>
   <h4 class="heading settled" data-level="4.2.3" id="erroreventinit"><span class="secno">4.2.3. </span><span class="content">MediaRecorderErrorEventInit</span><a class="self-link" href="#erroreventinit"></a></h4>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="MediaRecorderErrorEventInit" data-dfn-type="dict-member" data-export id="dom-mediarecordererroreventinit-error"><code>error</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①③">DOMException</a></span>
    <dd>
     The <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①④">DOMException</a></code> causing the error that triggered the event.
  An explanatory message about the error circumstances MAY be provided
  in its <a href="https://heycam.github.io/webidl/#es-DOMException-constructor-object"> message</a> attribute. 
     <div class="note" role="note"> If an implementation places non-standard properties on <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⑤">DOMException</a></code>,
  exposing e.g. stack traces or error line numbers, these are encouraged to
  point to whichever method call most closely identifies the run-time operation
  that caused the error, e.g. <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start③">start()</a></code>. </div>
   </dl>
   <h3 class="heading settled" data-level="4.3" id="exception-summary"><span class="secno">4.3. </span><span class="content">Exception Summary</span><a class="self-link" href="#exception-summary"></a></h3>
   <p>Each of the exceptions defined in this document is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⑥">DOMException</a></code> with a
specific type.</p>
   <table class="vert">
    <thead>
     <tr>
      <th>Name
      <th>Description
    <tbody>
     <tr>
      <td><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>
      <td>An operation was called on an object on which it is not allowed
      or at a time when it is not allowed, or if a request is made on a
      source object that has been deleted or removed.
     <tr>
      <td><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror③">NotSupportedError</a></code>
      <td>An operation could not be performed because the MIME type was not
      supported or the set of tracks could not be recorded by the MIME type.
      User agents should provide as much additional information as possible in
      the <code>message</code> attribute.
     <tr>
      <td><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror②">SecurityError</a></code>
      <td>The <a data-link-type="dfn" href="https://www.w3.org/TR/webrtc-identity/#isolated-media-streams" id="ref-for-isolated-media-streams③">isolation properties</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream⑧">MediaStream</a></code> do not allow the
      MediaRecorder access to it.
     <tr>
      <td><code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidmodificationerror" id="ref-for-invalidmodificationerror①">InvalidModificationError</a></code>
      <td>The set of <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastreamtrack" id="ref-for-mediastreamtrack②">MediaStreamTrack</a></code>s of the recoded <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream⑨">MediaStream</a></code> has
      changed, preventing any further recording.
   </table>
   <h2 class="heading settled" data-level="5" id="event-summary"><span class="secno">5. </span><span class="content">Event summary</span><a class="self-link" href="#event-summary"></a></h2>
   <p>The following additional events fire on <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①⑤">MediaRecorder</a></code> objects:</p>
   <table class="vert">
    <thead>
     <tr>
      <th>Event name
      <th>Interface
      <th><a href="https://dom.spec.whatwg.org/#concept-event-fire" id="termref-for-">Fired </a> when...
    <tbody>
     <tr>
      <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start">start</dfn>
      <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event②">Event</a></code>
      <td>The UA has started recording data from the MediaStream.
     <tr>
      <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stop">stop</dfn>
      <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event③">Event</a></code>
      <td>The UA has stopped recording data from the MediaStream.
     <tr>
      <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="dataavailable">dataavailable</dfn>
      <td><code class="idl"><a data-link-type="idl" href="#blobevent" id="ref-for-blobevent⑤">BlobEvent</a></code>
      <td>The UA generates this even to return data to the application. The <code class="idl"><a data-link-type="idl" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data④">data</a></code> attribute of this event contains a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①⑥">Blob</a></code> of recorded
      data.
     <tr>
      <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pause">pause</dfn>
      <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event④">Event</a></code>
      <td>The UA has paused recording data from the MediaStream.
     <tr>
      <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="resume">resume</dfn>
      <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event⑤">Event</a></code>
      <td>The UA has resumed recording data from the MediaStream.
     <tr>
      <td><dfn data-dfn-type="dfn" data-noexport id="error">error<a class="self-link" href="#error"></a></dfn>
      <td><code class="idl"><a data-link-type="idl" href="#mediarecordererrorevent" id="ref-for-mediarecordererrorevent⑤">MediaRecorderErrorEvent</a></code>
      <td>An error has occurred, e.g. out of memory or a modification to
      the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream⑤">stream</a></code> has occurred that makes it impossible to
      continue recording (e.g. a Track has been added to or removed from
      the said <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream⑥">stream</a></code> while recording is occurring).
   </table>
   <h2 class="heading settled" data-level="6" id="privacy-and-security"><span class="secno">6. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#privacy-and-security"></a></h2>
   <p><em>This section is non-normative</em>.</p>
   <p>Given that the source of data for <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①⑥">MediaRecorder</a></code> is always going to be a <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream⑦">stream</a></code>, a large part of the security is essentially offloaded onto the <a data-link-type="biblio" href="#biblio-getusermedia">[GETUSERMEDIA]</a> and its "Privacy and Security Consideration" Section. In
particular, the source <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream⑧">stream</a></code> is assumed to be coming from a <a data-link-type="dfn" href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts" id="ref-for-secure-contexts">secure context</a>.</p>
   <h3 class="heading settled" data-level="6.1" id="resource-exhaustion"><span class="secno">6.1. </span><span class="content">Resource exhaustion</span><a class="self-link" href="#resource-exhaustion"></a></h3>
   <p>Video and audio encoding can consume a great deal of resources. A malicious
website could try to block or bring down the UA by configuring too large a
workload, e.g. encoding large frame resolutions and/or framerates.</p>
   <p><code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①⑦">MediaRecorder</a></code> can be configured to hold on to the encoded data for a certain
period of time upon <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start④">start()</a></code> by means of the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-start-timeslice-timeslice" id="ref-for-dom-mediarecorder-start-timeslice-timeslice①">timeslice</a></code> parameter. Too
large a time slice parameter can force the UA to buffer a large amount of data,
causing jankiness and othermise memory exhaustion.</p>
   <p>UAs should take measures to avoid the encoding and buffering process from
exhausting the resources.</p>
   <h2 class="heading settled" data-level="7" id="examples"><span class="secno">7. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <div class="note" role="note"> Slightly modified versions of these examples can be found in e.g. <a href="https://codepen.io/collection/XjkNbN/">this codepen collection</a>. </div>
   <h3 class="heading settled" data-level="7.1" id="example1"><span class="secno">7.1. </span><span class="content">Check for <code class="idl"><a data-link-type="idl" href="#mediarecorder" id="ref-for-mediarecorder①⑧">MediaRecorder</a></code> and content types</span><a class="self-link" href="#example1"></a></h3>
   <p>This example checks if the implementation supports a few popular codec/container
combinations.</p>
   <div class="note" role="note"> The following example can also be found in e.g. <a href="https://codepen.io/miguelao/pen/edqNab?editors=0010">this codepen</a> with minimal modifications. </div>
   <div class="example" id="example-a2cf53fd">
    <a class="self-link" href="#example-a2cf53fd"></a> 
<pre class="highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->MediaRecorder <c- o>==</c-> <c- kc>undefined</c-><c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->error<c- p>(</c-><c- t>'MediaRecorder not supported, boo'</c-><c- p>);</c->
<c- p>}</c-> <c- k>else</c-> <c- p>{</c->
  <c- a>var</c-> contentTypes <c- o>=</c-> <c- p>[</c-><c- u>"video/webm"</c-><c- p>,</c->
                      <c- u>"video/webm;codecs=vp8"</c-><c- p>,</c->
                      <c- u>"video/x-matroska;codecs=avc1"</c-><c- p>,</c->
                      <c- u>"audio/webm"</c-><c- p>,</c->
                      <c- u>"video/mp4;codecs=avc1"</c-><c- p>,</c->
                      <c- u>"video/invalid"</c-><c- p>];</c->
  contentTypes<c- p>.</c->forEach<c- p>(</c->contentType <c- p>=></c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c->contentType <c- o>+</c-> <c- t>' is '</c->
        <c- o>+</c-> <c- p>(</c->MediaRecorder<c- p>.</c->isTypeSupported<c- p>(</c->contentType<c- p>)</c-> <c- o>?</c->
            <c- t>'supported'</c-> <c- o>:</c-> <c- t>'NOT supported '</c-><c- p>));</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="7.2" id="example2"><span class="secno">7.2. </span><span class="content">Recording webcam video and audio</span><a class="self-link" href="#example2"></a></h3>
   <p>This example captures an video+audio <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream①⓪">MediaStream</a></code> using <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#dom-mediadevices-getusermedia" id="ref-for-dom-mediadevices-getusermedia">getUserMedia()</a></code>,
plugs it into a <code>&lt;video></code> tag and tries to record it,
retrieving the recorded chunks via the <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-ondataavailable" id="ref-for-dom-mediarecorder-ondataavailable②">ondataavailable</a></code> event.  Note that the
recording will go on forever until either MediaRecorder is <code class="idl"><a data-link-type="idl" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop④">stop()</a></code>ed or all
the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastreamtrack" id="ref-for-mediastreamtrack③">MediaStreamTrack</a></code>s of the recorded <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream①①">MediaStream</a></code> are <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/mediacapture-streams/#idl-def-MediaStreamTrackState.ended" id="ref-for-idl-def-MediaStreamTrackState.ended①">ended</a></code>.</p>
   <div class="note" role="note"> The following example can also be found in e.g. <a href="https://codepen.io/miguelao/pen/wzVMJb?editors=0010">this codepen</a> with minimal modifications. </div>
   <div class="example" id="example-976020f4">
    <a class="self-link" href="#example-976020f4"></a> 
<pre class="highlight"><c- o>&lt;</c->html<c- o>></c->
<c- o>&lt;</c->body<c- o>></c->
<c- o>&lt;</c->video autoplay<c- o>/></c->
<c- o>&lt;</c->script<c- o>></c->
  <c- a>var</c-> recordedChunks <c- o>=</c-> <c- p>[];</c->

  <c- a>function</c-> gotMedia<c- p>(</c->stream<c- p>)</c-> <c- p>{</c->
    <c- c1>// |video| shows a live view of the captured MediaStream.</c->
    <c- a>var</c-> video <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>'video'</c-><c- p>);</c->
    video<c- p>.</c->src <c- o>=</c-> URL<c- p>.</c->createObjectURL<c- p>(</c->stream<c- p>);</c->

    <c- a>var</c-> recorder <c- o>=</c-> <c- kc>null</c-><c- p>;</c->
    <c- k>try</c-> <c- p>{</c->
      recorder <c- o>=</c-> <c- k>new</c-> MediaRecorder<c- p>(</c->stream<c- p>,</c-> <c- p>{</c->mimeType <c- o>:</c-> <c- u>"video/webm"</c-><c- p>});</c->
    <c- p>}</c-> <c- k>catch</c-> <c- p>(</c->e<c- p>)</c-> <c- p>{</c->
      console<c- p>.</c->error<c- p>(</c-><c- t>'Exception while creating MediaRecorder: '</c-> <c- o>+</c-> e<c- p>);</c->
      <c- k>return</c-><c- p>;</c->
    <c- p>}</c->

    recorder<c- p>.</c->ondataavailable <c- o>=</c-> <c- p>(</c->event<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
      console<c- p>.</c->log<c- p>(</c-><c- t>' Recorded chunk of size '</c-> <c- o>+</c-> event<c- p>.</c->data<c- p>.</c->size <c- o>+</c-> <c- u>"B"</c-><c- p>);</c->
      recordedChunks<c- p>.</c->push<c- p>(</c->event<c- p>.</c->data<c- p>);</c->
    <c- p>};</c->

    recorder<c- p>.</c->start<c- p>(</c-><c- mi>100</c-><c- p>);</c->
  <c- p>}</c->

  navigator<c- p>.</c->mediaDevices<c- p>.</c->getUserMedia<c- p>({</c->video<c- o>:</c-> <c- kc>true</c-> <c- p>,</c-> audio<c- o>:</c-> <c- kc>true</c-><c- p>})</c->
      <c- p>.</c->then<c- p>(</c->gotMedia<c- p>)</c->
      <c- p>.</c-><c- k>catch</c-><c- p>(</c->e <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->error<c- p>(</c-><c- t>'getUserMedia() failed: '</c-> <c- o>+</c-> e<c- p>);</c-> <c- p>});</c->
<c- o>&lt;</c->/script>
<c- o>&lt;</c->/body>
<c- o>&lt;</c->/html>
</pre>
   </div>
   <div class="note" role="note"> The <code>recordedChunks</code> can be saved to a file using e.g. the function <code>download()</code> in the <a href="https://developers.google.com/web/updates/2016/01/mediarecorder"> MediaRecorder Web Fundamentals article</a>. </div>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <h3 class="no-ref no-num heading settled" id="conventions"><span class="content">Document conventions</span><a class="self-link" href="#conventions"></a></h3>
   <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
   <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
   <div class="example" id="example-ae2b6bc0">
    <a class="self-link" href="#example-ae2b6bc0"></a> 
    <p>This is an example of an informative example.</p>
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note">Note, this is an informative note.</p>
   <h3 class="no-ref no-num heading settled" id="conformant-algorithms"><span class="content">Conformant Algorithms</span><a class="self-link" href="#conformant-algorithms"></a></h3>
   <p>Requirements phrased in the imperative as part of algorithms (such as
    "strip any leading space characters" or "return false and abort these
    steps") are to be interpreted with the meaning of the key word ("must",
    "should", "may", etc) used in introducing the algorithm.</p>
   <p>Conformance requirements phrased as algorithms or specific steps can be
    implemented in any manner, so long as the end result is equivalent. In
    particular, the algorithms defined in this specification are intended to
    be easy to understand and are not intended to be performant. Implementers
    are encouraged to optimize.</p>
   <h3 class="no-ref no-num heading settled" id="conformance-classes"><span class="content">Conformance Classes</span><a class="self-link" href="#conformance-classes"></a></h3>
   <p>A <dfn data-dfn-type="dfn" data-noexport id="conformant-user-agent">conformant user agent<a class="self-link" href="#conformant-user-agent"></a></dfn> must implement all the requirements
    listed in this specification that are applicable to user agents.</p>
   <p>A <dfn data-dfn-type="dfn" data-noexport id="conformant-server">conformant server<a class="self-link" href="#conformant-server"></a></dfn> must implement all the requirements listed
    in this specification that are applicable to servers.</p>
  </div>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li>
    audioBitsPerSecond
    <ul>
     <li><a href="#dom-mediarecorder-audiobitspersecond">attribute for MediaRecorder</a><span>, in §2.2</span>
     <li><a href="#dom-mediarecorderoptions-audiobitspersecond">dict-member for MediaRecorderOptions</a><span>, in §2.5.1</span>
    </ul>
   <li><a href="#dom-mediarecorderoptions-bitspersecond">bitsPerSecond</a><span>, in §2.5.1</span>
   <li><a href="#blobevent">BlobEvent</a><span>, in §3</span>
   <li><a href="#dictdef-blobeventinit">BlobEventInit</a><span>, in §3.3</span>
   <li><a href="#dom-blobevent-blobevent">BlobEvent(type, eventInitDict)</a><span>, in §3.1</span>
   <li><a href="#conformant-server">conformant server</a><span>, in §Unnumbered section</span>
   <li><a href="#conformant-user-agent">conformant user agent</a><span>, in §Unnumbered section</span>
   <li><a href="#constrainedbitspersecond">[[ConstrainedBitsPerSecond]]</a><span>, in §2.1</span>
   <li><a href="#constrainedmimetype">[[ConstrainedMimeType]]</a><span>, in §2.1</span>
   <li>
    data
    <ul>
     <li><a href="#dom-blobevent-data">attribute for BlobEvent</a><span>, in §3.2</span>
     <li><a href="#dom-blobeventinit-data">dict-member for BlobEventInit</a><span>, in §3.3.1</span>
    </ul>
   <li><a href="#dataavailable">dataavailable</a><span>, in §5</span>
   <li>
    error
    <ul>
     <li><a href="#dom-mediarecordererrorevent-error">attribute for MediaRecorderErrorEvent</a><span>, in §4.2.2</span>
     <li><a href="#error">definition of</a><span>, in §5</span>
     <li><a href="#dom-mediarecordererroreventinit-error">dict-member for MediaRecorderErrorEventInit</a><span>, in §4.2.3</span>
    </ul>
   <li><a href="#fire-an-error-event">fire an error event</a><span>, in §4.2</span>
   <li><a href="#abstract-opdef-inactivate-the-recorder">Inactivate the recorder</a><span>, in §2.3</span>
   <li><a href="#dom-recordingstate-inactive">inactive</a><span>, in §2.6.1</span>
   <li><a href="#dom-recordingstate-inactive">"inactive"</a><span>, in §2.6.1</span>
   <li><a href="#abstract-opdef-is-type-supported">is type supported</a><span>, in §2.3</span>
   <li><a href="#dom-mediarecorder-istypesupported">isTypeSupported(type)</a><span>, in §2.3</span>
   <li><a href="#mediarecorder">MediaRecorder</a><span>, in §2</span>
   <li><a href="#mediarecordererrorevent">MediaRecorderErrorEvent</a><span>, in §4.2</span>
   <li><a href="#dictdef-mediarecordererroreventinit">MediaRecorderErrorEventInit</a><span>, in §4.2</span>
   <li><a href="#dom-mediarecordererrorevent-mediarecordererrorevent">MediaRecorderErrorEvent(type, eventInitDict)</a><span>, in §4.2.1</span>
   <li><a href="#dictdef-mediarecorderoptions">MediaRecorderOptions</a><span>, in §2.5</span>
   <li><a href="#dom-mediarecorder-mediarecorder">MediaRecorder(stream)</a><span>, in §2.1</span>
   <li><a href="#dom-mediarecorder-mediarecorder">MediaRecorder(stream, options)</a><span>, in §2.1</span>
   <li>
    mimeType
    <ul>
     <li><a href="#dom-mediarecorder-mimetype">attribute for MediaRecorder</a><span>, in §2.2</span>
     <li><a href="#dom-mediarecorderoptions-mimetype">dict-member for MediaRecorderOptions</a><span>, in §2.5.1</span>
    </ul>
   <li><a href="#dom-mediarecorder-ondataavailable">ondataavailable</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-onerror">onerror</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-onpause">onpause</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-onresume">onresume</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-onstart">onstart</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-onstop">onstop</a><span>, in §2.2</span>
   <li><a href="#dom-mediarecorder-pause">pause()</a><span>, in §2.3</span>
   <li><a href="#pause">pause</a><span>, in §5</span>
   <li><a href="#dom-recordingstate-paused">paused</a><span>, in §2.6.1</span>
   <li><a href="#dom-recordingstate-paused">"paused"</a><span>, in §2.6.1</span>
   <li><a href="#dom-recordingstate-recording">"recording"</a><span>, in §2.6.1</span>
   <li><a href="#dom-recordingstate-recording">recording</a><span>, in §2.6.1</span>
   <li><a href="#enumdef-recordingstate">RecordingState</a><span>, in §2.6</span>
   <li><a href="#dom-mediarecorder-requestdata">requestData()</a><span>, in §2.3</span>
   <li><a href="#resume">resume</a><span>, in §5</span>
   <li><a href="#dom-mediarecorder-resume">resume()</a><span>, in §2.3</span>
   <li><a href="#start">start</a><span>, in §5</span>
   <li><a href="#dom-mediarecorder-start">start()</a><span>, in §2.3</span>
   <li><a href="#dom-mediarecorder-start">start(timeslice)</a><span>, in §2.3</span>
   <li><a href="#dom-mediarecorder-state">state</a><span>, in §2.2</span>
   <li><a href="#stop">stop</a><span>, in §5</span>
   <li><a href="#dom-mediarecorder-stop">stop()</a><span>, in §2.3</span>
   <li><a href="#dom-mediarecorder-stream">stream</a><span>, in §2.2</span>
   <li>
    timecode
    <ul>
     <li><a href="#dom-blobevent-timecode">attribute for BlobEvent</a><span>, in §3.2</span>
     <li><a href="#dom-blobeventinit-timecode">dict-member for BlobEventInit</a><span>, in §3.3.1</span>
    </ul>
   <li><a href="#to-fire-a-blob-event">To fire a blob event</a><span>, in §2.4</span>
   <li>
    videoBitsPerSecond
    <ul>
     <li><a href="#dom-mediarecorder-videobitspersecond">attribute for MediaRecorder</a><span>, in §2.2</span>
     <li><a href="#dom-mediarecorderoptions-videobitspersecond">dict-member for MediaRecorderOptions</a><span>, in §2.5.1</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">3. Blob Event</a>
    <li><a href="#ref-for-event①">4.2. MediaRecorderErrorEvent</a>
    <li><a href="#ref-for-event②">5. Event summary</a> <a href="#ref-for-event③">(2)</a> <a href="#ref-for-event④">(3)</a> <a href="#ref-for-event⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">4.2. MediaRecorderErrorEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">2.3. Methods</a> <a href="#ref-for-concept-event-fire①">(2)</a> <a href="#ref-for-concept-event-fire②">(3)</a> <a href="#ref-for-concept-event-fire③">(4)</a> <a href="#ref-for-concept-event-fire④">(5)</a> <a href="#ref-for-concept-event-fire⑤">(6)</a> <a href="#ref-for-concept-event-fire⑥">(7)</a> <a href="#ref-for-concept-event-fire⑦">(8)</a>
    <li><a href="#ref-for-concept-event-fire⑧">2.4. Data handling</a>
    <li><a href="#ref-for-concept-event-fire⑨">4.1. General principles</a> <a href="#ref-for-concept-event-fire①⓪">(2)</a>
    <li><a href="#termref-for-">5. Event summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-Blob">
   <a href="https://w3c.github.io/FileAPI/#dfn-Blob">https://w3c.github.io/FileAPI/#dfn-Blob</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-Blob">1. Overview</a>
    <li><a href="#ref-for-dfn-Blob①">2.2. Attributes</a>
    <li><a href="#ref-for-dfn-Blob②">2.3. Methods</a> <a href="#ref-for-dfn-Blob③">(2)</a> <a href="#ref-for-dfn-Blob④">(3)</a> <a href="#ref-for-dfn-Blob⑤">(4)</a> <a href="#ref-for-dfn-Blob⑥">(5)</a>
    <li><a href="#ref-for-dfn-Blob⑦">2.4. Data handling</a>
    <li><a href="#ref-for-dfn-Blob⑧">3. Blob Event</a>
    <li><a href="#ref-for-dfn-Blob⑨">3.2. Attributes</a> <a href="#ref-for-dfn-Blob①⓪">(2)</a>
    <li><a href="#ref-for-dfn-Blob①①">3.3. BlobEventInit</a>
    <li><a href="#ref-for-dfn-Blob①②">3.3.1. Members</a> <a href="#ref-for-dfn-Blob①③">(2)</a>
    <li><a href="#ref-for-dfn-Blob①④">4.1. General principles</a> <a href="#ref-for-dfn-Blob①⑤">(2)</a>
    <li><a href="#ref-for-dfn-Blob①⑥">5. Event summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-type">
   <a href="https://w3c.github.io/FileAPI/#dfn-type">https://w3c.github.io/FileAPI/#dfn-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-type">3.2. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">2. Media Recorder API</a> <a href="#ref-for-eventhandler①">(2)</a> <a href="#ref-for-eventhandler②">(3)</a> <a href="#ref-for-eventhandler③">(4)</a> <a href="#ref-for-eventhandler④">(5)</a> <a href="#ref-for-eventhandler⑤">(6)</a>
    <li><a href="#ref-for-eventhandler⑥">2.2. Attributes</a> <a href="#ref-for-eventhandler⑦">(2)</a> <a href="#ref-for-eventhandler⑧">(3)</a> <a href="#ref-for-eventhandler⑨">(4)</a> <a href="#ref-for-eventhandler①⓪">(5)</a> <a href="#ref-for-eventhandler①①">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-secure-contexts">
   <a href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts">https://w3c.github.io/webappsec-secure-contexts/#secure-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-secure-contexts">6. Privacy and Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">2.1. Constructors</a>
    <li><a href="#ref-for-idl-DOMException①">2.3. Methods</a> <a href="#ref-for-idl-DOMException②">(2)</a> <a href="#ref-for-idl-DOMException③">(3)</a> <a href="#ref-for-idl-DOMException④">(4)</a> <a href="#ref-for-idl-DOMException⑤">(5)</a> <a href="#ref-for-idl-DOMException⑥">(6)</a> <a href="#ref-for-idl-DOMException⑦">(7)</a>
    <li><a href="#ref-for-idl-DOMException⑧">4.1. General principles</a>
    <li><a href="#ref-for-idl-DOMException⑨">4.2. MediaRecorderErrorEvent</a> <a href="#ref-for-idl-DOMException①⓪">(2)</a> <a href="#ref-for-idl-DOMException①①">(3)</a>
    <li><a href="#ref-for-idl-DOMException①②">4.2.2. Attributes</a>
    <li><a href="#ref-for-idl-DOMException①③">4.2.3. MediaRecorderErrorEventInit</a> <a href="#ref-for-idl-DOMException①④">(2)</a> <a href="#ref-for-idl-DOMException①⑤">(3)</a>
    <li><a href="#ref-for-idl-DOMException①⑥">4.3. Exception Summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2. Media Recorder API</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">2.2. Attributes</a>
    <li><a href="#ref-for-idl-DOMString③">2.3. Methods</a>
    <li><a href="#ref-for-idl-DOMString④">2.5. MediaRecorderOptions</a>
    <li><a href="#ref-for-idl-DOMString⑤">2.5.1. Members</a>
    <li><a href="#ref-for-idl-DOMString⑥">3. Blob Event</a>
    <li><a href="#ref-for-idl-DOMString⑦">4.2. MediaRecorderErrorEvent</a>
    <li><a href="#ref-for-idl-DOMString⑧">4.2.1. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2. Media Recorder API</a>
    <li><a href="#ref-for-Exposed①">3. Blob Event</a>
    <li><a href="#ref-for-Exposed②">4.2. MediaRecorderErrorEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidmodificationerror">
   <a href="https://heycam.github.io/webidl/#invalidmodificationerror">https://heycam.github.io/webidl/#invalidmodificationerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidmodificationerror">2.3. Methods</a>
    <li><a href="#ref-for-invalidmodificationerror①">4.3. Exception Summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">2.3. Methods</a> <a href="#ref-for-invalidstateerror①">(2)</a> <a href="#ref-for-invalidstateerror②">(3)</a> <a href="#ref-for-invalidstateerror③">(4)</a>
    <li><a href="#ref-for-invalidstateerror④">4.3. Exception Summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notsupportederror">
   <a href="https://heycam.github.io/webidl/#notsupportederror">https://heycam.github.io/webidl/#notsupportederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notsupportederror">2.1. Constructors</a>
    <li><a href="#ref-for-notsupportederror①">2.3. Methods</a> <a href="#ref-for-notsupportederror②">(2)</a>
    <li><a href="#ref-for-notsupportederror③">4.3. Exception Summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">3. Blob Event</a>
    <li><a href="#ref-for-SameObject①">4.2. MediaRecorderErrorEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-securityerror">
   <a href="https://heycam.github.io/webidl/#securityerror">https://heycam.github.io/webidl/#securityerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-securityerror">2.3. Methods</a> <a href="#ref-for-securityerror①">(2)</a>
    <li><a href="#ref-for-securityerror②">4.3. Exception Summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unknownerror">
   <a href="https://heycam.github.io/webidl/#unknownerror">https://heycam.github.io/webidl/#unknownerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unknownerror">2.3. Methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">2. Media Recorder API</a> <a href="#ref-for-idl-unsigned-long①">(2)</a> <a href="#ref-for-idl-unsigned-long②">(3)</a>
    <li><a href="#ref-for-idl-unsigned-long③">2.2. Attributes</a> <a href="#ref-for-idl-unsigned-long④">(2)</a>
    <li><a href="#ref-for-idl-unsigned-long⑤">2.5. MediaRecorderOptions</a> <a href="#ref-for-idl-unsigned-long⑥">(2)</a> <a href="#ref-for-idl-unsigned-long⑦">(3)</a>
    <li><a href="#ref-for-idl-unsigned-long⑧">2.5.1. Members</a> <a href="#ref-for-idl-unsigned-long⑨">(2)</a> <a href="#ref-for-idl-unsigned-long①⓪">(3)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FileAPI]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dfn-Blob" style="color:initial">Blob</span>
     <li><span class="dfn-paneled" id="term-for-dfn-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
    </ul>
   <li>
    <a data-link-type="biblio">[secure-contexts]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-secure-contexts" style="color:initial">secure contexts</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidmodificationerror" style="color:initial">InvalidModificationError</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-notsupportederror" style="color:initial">NotSupportedError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-securityerror" style="color:initial">SecurityError</span>
     <li><span class="dfn-paneled" id="term-for-unknownerror" style="color:initial">UnknownError</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-fileapi">[FileAPI]
   <dd>Marijn Kruisselbrink; Arun Ranganathan. <a href="https://www.w3.org/TR/FileAPI/">File API</a>. 31 May 2019. WD. URL: <a href="https://www.w3.org/TR/FileAPI/">https://www.w3.org/TR/FileAPI/</a>
   <dt id="biblio-getusermedia">[GETUSERMEDIA]
   <dd>Daniel Burnett; et al. <a href="https://www.w3.org/TR/mediacapture-streams/">Media Capture and Streams</a>. 3 October 2017. CR. URL: <a href="https://www.w3.org/TR/mediacapture-streams/">https://www.w3.org/TR/mediacapture-streams/</a>
   <dt id="biblio-hr-time">[HR-TIME]
   <dd>Jatinder Mann. <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a>. 17 December 2012. REC. URL: <a href="https://www.w3.org/TR/hr-time/">https://www.w3.org/TR/hr-time/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2046">[RFC2046]
   <dd>N. Freed; N. Borenstein. <a href="https://tools.ietf.org/html/rfc2046">Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</a>. November 1996. Draft Standard. URL: <a href="https://tools.ietf.org/html/rfc2046">https://tools.ietf.org/html/rfc2046</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-secure-contexts">[SECURE-CONTEXTS]
   <dd>Mike West. <a href="https://www.w3.org/TR/secure-contexts/">Secure Contexts</a>. 15 September 2016. CR. URL: <a href="https://www.w3.org/TR/secure-contexts/">https://www.w3.org/TR/secure-contexts/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-rfc6381">[RFC6381]
   <dd>R. Gellens; D. Singer; P. Frojdh. <a href="https://tools.ietf.org/html/rfc6381">The 'Codecs' and 'Profiles' Parameters for "Bucket" Media Types</a>. August 2011. Proposed Standard. URL: <a href="https://tools.ietf.org/html/rfc6381">https://tools.ietf.org/html/rfc6381</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 <a class="idl-code" data-link-type="constructor" href="#dom-mediarecorder-mediarecorder" id="ref-for-dom-mediarecorder-mediarecorder②"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream①②"><c- n>MediaStream</c-></a> <a href="#dom-mediarecorder-mediarecorder-stream-options-stream"><code><c- g>stream</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediarecorderoptions" id="ref-for-dictdef-mediarecorderoptions②"><c- n>MediaRecorderOptions</c-></a> <a href="#dom-mediarecorder-mediarecorder-stream-options-options"><code><c- g>options</c-></code></a>)]
<c- b>interface</c-> <a href="#mediarecorder"><code><c- g>MediaRecorder</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/mediacapture-streams/#mediastream" id="ref-for-mediastream②①"><c- n>MediaStream</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="MediaStream" href="#dom-mediarecorder-stream" id="ref-for-dom-mediarecorder-stream⑨"><c- g>stream</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-mediarecorder-mimetype" id="ref-for-dom-mediarecorder-mimetype⑤"><c- g>mimeType</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-recordingstate" id="ref-for-enumdef-recordingstate②"><c- n>RecordingState</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="RecordingState" href="#dom-mediarecorder-state" id="ref-for-dom-mediarecorder-state①⑤"><c- g>state</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①③"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onstart" id="ref-for-dom-mediarecorder-onstart①"><c- g>onstart</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onstop" id="ref-for-dom-mediarecorder-onstop①"><c- g>onstop</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-ondataavailable" id="ref-for-dom-mediarecorder-ondataavailable①①"><c- g>ondataavailable</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onpause" id="ref-for-dom-mediarecorder-onpause①"><c- g>onpause</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onresume" id="ref-for-dom-mediarecorder-onresume①"><c- g>onresume</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediarecorder-onerror" id="ref-for-dom-mediarecorder-onerror①"><c- g>onerror</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-mediarecorder-videobitspersecond" id="ref-for-dom-mediarecorder-videobitspersecond⑨"><c- g>videoBitsPerSecond</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①②"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-mediarecorder-audiobitspersecond" id="ref-for-dom-mediarecorder-audiobitspersecond⑨"><c- g>audioBitsPerSecond</c-></a>;

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-start" id="ref-for-dom-mediarecorder-start①①"><c- g>start</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②①"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-mediarecorder-start-timeslice-timeslice"><code><c- g>timeslice</c-></code></a>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-stop" id="ref-for-dom-mediarecorder-stop①①"><c- g>stop</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-pause" id="ref-for-dom-mediarecorder-pause③"><c- g>pause</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-resume" id="ref-for-dom-mediarecorder-resume②"><c- g>resume</c-></a>();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-requestdata" id="ref-for-dom-mediarecorder-requestdata④"><c- g>requestData</c-></a>();

  <c- b>static</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediarecorder-istypesupported" id="ref-for-dom-mediarecorder-istypesupported①"><c- g>isTypeSupported</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-mediarecorder-istypesupported-type-type"><code><c- g>type</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-mediarecorderoptions"><code><c- g>MediaRecorderOptions</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediarecorderoptions-mimetype" id="ref-for-dom-mediarecorderoptions-mimetype②①"><c- g>mimeType</c-></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑤①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-audiobitspersecond" id="ref-for-dom-mediarecorderoptions-audiobitspersecond①①"><c- g>audioBitsPerSecond</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑥①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-videobitspersecond" id="ref-for-dom-mediarecorderoptions-videobitspersecond①①"><c- g>videoBitsPerSecond</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑦①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned long " href="#dom-mediarecorderoptions-bitspersecond" id="ref-for-dom-mediarecorderoptions-bitspersecond①①"><c- g>bitsPerSecond</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-recordingstate"><code><c- g>RecordingState</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-inactive" id="ref-for-dom-recordingstate-inactive⑦①"><c- s>"inactive"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-recording" id="ref-for-dom-recordingstate-recording④①"><c- s>"recording"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-recordingstate-paused" id="ref-for-dom-recordingstate-paused②①"><c- s>"paused"</c-></a>
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="constructor" href="#dom-blobevent-blobevent" id="ref-for-dom-blobevent-blobevent①"><c- g>Constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥①"><c- b>DOMString</c-></a> <a href="#dom-blobevent-blobevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-blobeventinit" id="ref-for-dictdef-blobeventinit①"><c- n>BlobEventInit</c-></a> <a href="#dom-blobevent-blobevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>)]
<c- b>interface</c-> <a href="#blobevent"><code><c- g>BlobEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event⑥"><c- n>Event</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob⑧①"><c- n>Blob</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Blob" href="#dom-blobevent-data" id="ref-for-dom-blobevent-data②①"><c- g>data</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp⑤"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-blobevent-timecode" id="ref-for-dom-blobevent-timecode②"><c- g>timecode</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-blobeventinit"><code><c- g>BlobEventInit</c-></code></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-Blob" id="ref-for-dfn-Blob①①①"><c- n>Blob</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="Blob " href="#dom-blobeventinit-data" id="ref-for-dom-blobeventinit-data①"><c- g>data</c-></a>;
  <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/hr-time/#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp③①"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMHighResTimeStamp " href="#dom-blobeventinit-timecode" id="ref-for-dom-blobeventinit-timecode①"><c- g>timecode</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-mediarecordererroreventinit"><code><c- g>MediaRecorderErrorEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⓪①"><c- n>DOMException</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMException " href="#dom-mediarecordererroreventinit-error" id="ref-for-dom-mediarecordererroreventinit-error①"><c- g>error</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="constructor" href="#dom-mediarecordererrorevent-mediarecordererrorevent" id="ref-for-dom-mediarecordererrorevent-mediarecordererrorevent①"><c- g>Constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a> <a href="#dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-mediarecordererroreventinit" id="ref-for-dictdef-mediarecordererroreventinit②"><c- n>MediaRecorderErrorEventInit</c-></a> <a href="#dom-mediarecordererrorevent-mediarecordererrorevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>)]
<c- b>interface</c-> <a href="#mediarecordererrorevent"><code><c- g>MediaRecorderErrorEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①①"><c- n>Event</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①①①"><c- n>DOMException</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMException" href="#dom-mediarecordererrorevent-error" id="ref-for-dom-mediarecordererrorevent-error①①"><c- g>error</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="mediarecorder">
   <b><a href="#mediarecorder">#mediarecorder</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediarecorder">1. Overview</a>
    <li><a href="#ref-for-mediarecorder①">2.1. Constructors</a>
    <li><a href="#ref-for-mediarecorder②">2.2. Attributes</a> <a href="#ref-for-mediarecorder③">(2)</a>
    <li><a href="#ref-for-mediarecorder④">2.3. Methods</a> <a href="#ref-for-mediarecorder⑤">(2)</a> <a href="#ref-for-mediarecorder⑥">(3)</a> <a href="#ref-for-mediarecorder⑦">(4)</a> <a href="#ref-for-mediarecorder⑧">(5)</a> <a href="#ref-for-mediarecorder⑨">(6)</a> <a href="#ref-for-mediarecorder①⓪">(7)</a> <a href="#ref-for-mediarecorder①①">(8)</a> <a href="#ref-for-mediarecorder①②">(9)</a> <a href="#ref-for-mediarecorder①③">(10)</a> <a href="#ref-for-mediarecorder①④">(11)</a>
    <li><a href="#ref-for-mediarecorder①⑤">5. Event summary</a>
    <li><a href="#ref-for-mediarecorder①⑥">6. Privacy and Security Considerations</a>
    <li><a href="#ref-for-mediarecorder①⑦">6.1. Resource exhaustion</a>
    <li><a href="#ref-for-mediarecorder①⑧">7.1. Check for MediaRecorder and content types</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-start-timeslice-timeslice">
   <b><a href="#dom-mediarecorder-start-timeslice-timeslice">#dom-mediarecorder-start-timeslice-timeslice</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-start-timeslice-timeslice">2.3. Methods</a>
    <li><a href="#ref-for-dom-mediarecorder-start-timeslice-timeslice①">6.1. Resource exhaustion</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-mediarecorder">
   <b><a href="#dom-mediarecorder-mediarecorder">#dom-mediarecorder-mediarecorder</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-mediarecorder">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-mediarecorder①">2.1. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="constrainedmimetype">
   <b><a href="#constrainedmimetype">#constrainedmimetype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-constrainedmimetype">2.1. Constructors</a>
    <li><a href="#ref-for-constrainedmimetype①">2.3. Methods</a> <a href="#ref-for-constrainedmimetype②">(2)</a> <a href="#ref-for-constrainedmimetype③">(3)</a> <a href="#ref-for-constrainedmimetype④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="constrainedbitspersecond">
   <b><a href="#constrainedbitspersecond">#constrainedbitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-constrainedbitspersecond">2.1. Constructors</a> <a href="#ref-for-constrainedbitspersecond①">(2)</a>
    <li><a href="#ref-for-constrainedbitspersecond②">2.3. Methods</a> <a href="#ref-for-constrainedbitspersecond③">(2)</a> <a href="#ref-for-constrainedbitspersecond④">(3)</a> <a href="#ref-for-constrainedbitspersecond⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-stream">
   <b><a href="#dom-mediarecorder-stream">#dom-mediarecorder-stream</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-stream">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-stream①">2.1. Constructors</a> <a href="#ref-for-dom-mediarecorder-stream②">(2)</a>
    <li><a href="#ref-for-dom-mediarecorder-stream③">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-stream④">(2)</a>
    <li><a href="#ref-for-dom-mediarecorder-stream⑤">5. Event summary</a> <a href="#ref-for-dom-mediarecorder-stream⑥">(2)</a>
    <li><a href="#ref-for-dom-mediarecorder-stream⑦">6. Privacy and Security Considerations</a> <a href="#ref-for-dom-mediarecorder-stream⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-mimetype">
   <b><a href="#dom-mediarecorder-mimetype">#dom-mediarecorder-mimetype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-mimetype">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-mimetype①">2.1. Constructors</a>
    <li><a href="#ref-for-dom-mediarecorder-mimetype②">2.2. Attributes</a>
    <li><a href="#ref-for-dom-mediarecorder-mimetype③">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-mimetype④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-state">
   <b><a href="#dom-mediarecorder-state">#dom-mediarecorder-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-state">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-state①">2.1. Constructors</a>
    <li><a href="#ref-for-dom-mediarecorder-state②">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-state③">(2)</a> <a href="#ref-for-dom-mediarecorder-state④">(3)</a> <a href="#ref-for-dom-mediarecorder-state⑤">(4)</a> <a href="#ref-for-dom-mediarecorder-state⑥">(5)</a> <a href="#ref-for-dom-mediarecorder-state⑦">(6)</a> <a href="#ref-for-dom-mediarecorder-state⑧">(7)</a> <a href="#ref-for-dom-mediarecorder-state⑨">(8)</a> <a href="#ref-for-dom-mediarecorder-state①⓪">(9)</a> <a href="#ref-for-dom-mediarecorder-state①①">(10)</a> <a href="#ref-for-dom-mediarecorder-state①②">(11)</a> <a href="#ref-for-dom-mediarecorder-state①③">(12)</a>
    <li><a href="#ref-for-dom-mediarecorder-state①④">2.4. Data handling</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-onstart">
   <b><a href="#dom-mediarecorder-onstart">#dom-mediarecorder-onstart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-onstart">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-onstop">
   <b><a href="#dom-mediarecorder-onstop">#dom-mediarecorder-onstop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-onstop">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-ondataavailable">
   <b><a href="#dom-mediarecorder-ondataavailable">#dom-mediarecorder-ondataavailable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-ondataavailable">1. Overview</a>
    <li><a href="#ref-for-dom-mediarecorder-ondataavailable①">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-ondataavailable②">7.2. Recording webcam video and audio</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-onpause">
   <b><a href="#dom-mediarecorder-onpause">#dom-mediarecorder-onpause</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-onpause">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-onresume">
   <b><a href="#dom-mediarecorder-onresume">#dom-mediarecorder-onresume</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-onresume">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-onerror">
   <b><a href="#dom-mediarecorder-onerror">#dom-mediarecorder-onerror</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-onerror">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-videobitspersecond">
   <b><a href="#dom-mediarecorder-videobitspersecond">#dom-mediarecorder-videobitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-videobitspersecond">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-videobitspersecond①">2.1. Constructors</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond②">(2)</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond③">(3)</a>
    <li><a href="#ref-for-dom-mediarecorder-videobitspersecond④">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond⑤">(2)</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond⑥">(3)</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond⑦">(4)</a> <a href="#ref-for-dom-mediarecorder-videobitspersecond⑧">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-audiobitspersecond">
   <b><a href="#dom-mediarecorder-audiobitspersecond">#dom-mediarecorder-audiobitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-audiobitspersecond">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-audiobitspersecond①">2.1. Constructors</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond②">(2)</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond③">(3)</a>
    <li><a href="#ref-for-dom-mediarecorder-audiobitspersecond④">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond⑤">(2)</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond⑥">(3)</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond⑦">(4)</a> <a href="#ref-for-dom-mediarecorder-audiobitspersecond⑧">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-start">
   <b><a href="#dom-mediarecorder-start">#dom-mediarecorder-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-start">1. Overview</a>
    <li><a href="#ref-for-dom-mediarecorder-start①">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-start②">2.3. Methods</a>
    <li><a href="#ref-for-dom-mediarecorder-start③">4.2.3. MediaRecorderErrorEventInit</a>
    <li><a href="#ref-for-dom-mediarecorder-start④">6.1. Resource exhaustion</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="abstract-opdef-inactivate-the-recorder">
   <b><a href="#abstract-opdef-inactivate-the-recorder">#abstract-opdef-inactivate-the-recorder</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-abstract-opdef-inactivate-the-recorder">2.3. Methods</a> <a href="#ref-for-abstract-opdef-inactivate-the-recorder①">(2)</a> <a href="#ref-for-abstract-opdef-inactivate-the-recorder②">(3)</a> <a href="#ref-for-abstract-opdef-inactivate-the-recorder③">(4)</a> <a href="#ref-for-abstract-opdef-inactivate-the-recorder④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-stop">
   <b><a href="#dom-mediarecorder-stop">#dom-mediarecorder-stop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-stop">1. Overview</a>
    <li><a href="#ref-for-dom-mediarecorder-stop①">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-stop②">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-stop③">(2)</a>
    <li><a href="#ref-for-dom-mediarecorder-stop④">7.2. Recording webcam video and audio</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-pause">
   <b><a href="#dom-mediarecorder-pause">#dom-mediarecorder-pause</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-pause">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-pause①">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-pause②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-resume">
   <b><a href="#dom-mediarecorder-resume">#dom-mediarecorder-resume</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-resume">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-resume①">2.3. Methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-requestdata">
   <b><a href="#dom-mediarecorder-requestdata">#dom-mediarecorder-requestdata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-requestdata">2. Media Recorder API</a>
    <li><a href="#ref-for-dom-mediarecorder-requestdata①">2.3. Methods</a> <a href="#ref-for-dom-mediarecorder-requestdata②">(2)</a> <a href="#ref-for-dom-mediarecorder-requestdata③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorder-istypesupported">
   <b><a href="#dom-mediarecorder-istypesupported">#dom-mediarecorder-istypesupported</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorder-istypesupported">2. Media Recorder API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="abstract-opdef-is-type-supported">
   <b><a href="#abstract-opdef-is-type-supported">#abstract-opdef-is-type-supported</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-abstract-opdef-is-type-supported">2.1. Constructors</a>
    <li><a href="#ref-for-abstract-opdef-is-type-supported①">2.3. Methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="to-fire-a-blob-event">
   <b><a href="#to-fire-a-blob-event">#to-fire-a-blob-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-to-fire-a-blob-event">2.3. Methods</a> <a href="#ref-for-to-fire-a-blob-event">(2)</a> <a href="#ref-for-to-fire-a-blob-event">(3)</a> <a href="#ref-for-to-fire-a-blob-event">(4)</a> <a href="#ref-for-to-fire-a-blob-event">(5)</a> <a href="#ref-for-to-fire-a-blob-event">(6)</a> <a href="#ref-for-to-fire-a-blob-event">(7)</a>
    <li><a href="#ref-for-to-fire-a-blob-event">4.1. General principles</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediarecorderoptions">
   <b><a href="#dictdef-mediarecorderoptions">#dictdef-mediarecorderoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediarecorderoptions">2. Media Recorder API</a>
    <li><a href="#ref-for-dictdef-mediarecorderoptions①">2.1. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorderoptions-mimetype">
   <b><a href="#dom-mediarecorderoptions-mimetype">#dom-mediarecorderoptions-mimetype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorderoptions-mimetype">2.1. Constructors</a> <a href="#ref-for-dom-mediarecorderoptions-mimetype①">(2)</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-mimetype②">2.5. MediaRecorderOptions</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-mimetype③">2.5.1. Members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorderoptions-audiobitspersecond">
   <b><a href="#dom-mediarecorderoptions-audiobitspersecond">#dom-mediarecorderoptions-audiobitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorderoptions-audiobitspersecond">2.1. Constructors</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-audiobitspersecond①">2.5. MediaRecorderOptions</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-audiobitspersecond②">2.5.1. Members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorderoptions-videobitspersecond">
   <b><a href="#dom-mediarecorderoptions-videobitspersecond">#dom-mediarecorderoptions-videobitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorderoptions-videobitspersecond">2.1. Constructors</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-videobitspersecond①">2.5. MediaRecorderOptions</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-videobitspersecond②">2.5.1. Members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecorderoptions-bitspersecond">
   <b><a href="#dom-mediarecorderoptions-bitspersecond">#dom-mediarecorderoptions-bitspersecond</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecorderoptions-bitspersecond">2.1. Constructors</a>
    <li><a href="#ref-for-dom-mediarecorderoptions-bitspersecond①">2.5. MediaRecorderOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-recordingstate">
   <b><a href="#enumdef-recordingstate">#enumdef-recordingstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-recordingstate">2. Media Recorder API</a>
    <li><a href="#ref-for-enumdef-recordingstate①">2.2. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-recordingstate-inactive">
   <b><a href="#dom-recordingstate-inactive">#dom-recordingstate-inactive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-recordingstate-inactive">2.1. Constructors</a>
    <li><a href="#ref-for-dom-recordingstate-inactive①">2.3. Methods</a> <a href="#ref-for-dom-recordingstate-inactive②">(2)</a> <a href="#ref-for-dom-recordingstate-inactive③">(3)</a> <a href="#ref-for-dom-recordingstate-inactive④">(4)</a> <a href="#ref-for-dom-recordingstate-inactive⑤">(5)</a> <a href="#ref-for-dom-recordingstate-inactive⑥">(6)</a>
    <li><a href="#ref-for-dom-recordingstate-inactive⑦">2.6. RecordingState</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-recordingstate-recording">
   <b><a href="#dom-recordingstate-recording">#dom-recordingstate-recording</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-recordingstate-recording">2.3. Methods</a> <a href="#ref-for-dom-recordingstate-recording①">(2)</a> <a href="#ref-for-dom-recordingstate-recording②">(3)</a>
    <li><a href="#ref-for-dom-recordingstate-recording③">2.4. Data handling</a>
    <li><a href="#ref-for-dom-recordingstate-recording④">2.6. RecordingState</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-recordingstate-paused">
   <b><a href="#dom-recordingstate-paused">#dom-recordingstate-paused</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-recordingstate-paused">2.3. Methods</a> <a href="#ref-for-dom-recordingstate-paused①">(2)</a>
    <li><a href="#ref-for-dom-recordingstate-paused②">2.6. RecordingState</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="blobevent">
   <b><a href="#blobevent">#blobevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blobevent">2.4. Data handling</a>
    <li><a href="#ref-for-blobevent①">3.2. Attributes</a> <a href="#ref-for-blobevent②">(2)</a>
    <li><a href="#ref-for-blobevent③">3.3.1. Members</a> <a href="#ref-for-blobevent④">(2)</a>
    <li><a href="#ref-for-blobevent⑤">5. Event summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-blobevent-blobevent">
   <b><a href="#dom-blobevent-blobevent">#dom-blobevent-blobevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-blobevent-blobevent">3. Blob Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-blobevent-data">
   <b><a href="#dom-blobevent-data">#dom-blobevent-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-blobevent-data">2.2. Attributes</a>
    <li><a href="#ref-for-dom-blobevent-data①">2.4. Data handling</a>
    <li><a href="#ref-for-dom-blobevent-data②">3. Blob Event</a>
    <li><a href="#ref-for-dom-blobevent-data③">3.2. Attributes</a>
    <li><a href="#ref-for-dom-blobevent-data④">5. Event summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-blobevent-timecode">
   <b><a href="#dom-blobevent-timecode">#dom-blobevent-timecode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-blobevent-timecode">3. Blob Event</a>
    <li><a href="#ref-for-dom-blobevent-timecode①">3.2. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-blobeventinit">
   <b><a href="#dictdef-blobeventinit">#dictdef-blobeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-blobeventinit">3. Blob Event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-blobeventinit-data">
   <b><a href="#dom-blobeventinit-data">#dom-blobeventinit-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-blobeventinit-data">3.3. BlobEventInit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-blobeventinit-timecode">
   <b><a href="#dom-blobeventinit-timecode">#dom-blobeventinit-timecode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-blobeventinit-timecode">3.3. BlobEventInit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fire-an-error-event">
   <b><a href="#fire-an-error-event">#fire-an-error-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fire-an-error-event">2.3. Methods</a> <a href="#ref-for-fire-an-error-event①">(2)</a> <a href="#ref-for-fire-an-error-event②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediarecordererroreventinit">
   <b><a href="#dictdef-mediarecordererroreventinit">#dictdef-mediarecordererroreventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediarecordererroreventinit">4.2. MediaRecorderErrorEvent</a>
    <li><a href="#ref-for-dictdef-mediarecordererroreventinit①">4.2.1. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediarecordererrorevent">
   <b><a href="#mediarecordererrorevent">#mediarecordererrorevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediarecordererrorevent">2.2. Attributes</a>
    <li><a href="#ref-for-mediarecordererrorevent①">4.1. General principles</a>
    <li><a href="#ref-for-mediarecordererrorevent②">4.2. MediaRecorderErrorEvent</a> <a href="#ref-for-mediarecordererrorevent③">(2)</a>
    <li><a href="#ref-for-mediarecordererrorevent④">4.2.1. Constructors</a>
    <li><a href="#ref-for-mediarecordererrorevent⑤">5. Event summary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecordererrorevent-mediarecordererrorevent">
   <b><a href="#dom-mediarecordererrorevent-mediarecordererrorevent">#dom-mediarecordererrorevent-mediarecordererrorevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecordererrorevent-mediarecordererrorevent">4.2. MediaRecorderErrorEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecordererrorevent-error">
   <b><a href="#dom-mediarecordererrorevent-error">#dom-mediarecordererrorevent-error</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecordererrorevent-error">4.2. MediaRecorderErrorEvent</a> <a href="#ref-for-dom-mediarecordererrorevent-error①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediarecordererroreventinit-error">
   <b><a href="#dom-mediarecordererroreventinit-error">#dom-mediarecordererroreventinit-error</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediarecordererroreventinit-error">4.2. MediaRecorderErrorEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="start">
   <b><a href="#start">#start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start">2.2. Attributes</a>
    <li><a href="#ref-for-start①">2.3. Methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stop">
   <b><a href="#stop">#stop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stop">2.2. Attributes</a>
    <li><a href="#ref-for-stop①">2.3. Methods</a> <a href="#ref-for-stop②">(2)</a> <a href="#ref-for-stop③">(3)</a> <a href="#ref-for-stop④">(4)</a> <a href="#ref-for-stop⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dataavailable">
   <b><a href="#dataavailable">#dataavailable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dataavailable">2.2. Attributes</a>
    <li><a href="#ref-for-dataavailable①">2.3. Methods</a> <a href="#ref-for-dataavailable②">(2)</a> <a href="#ref-for-dataavailable③">(3)</a> <a href="#ref-for-dataavailable④">(4)</a> <a href="#ref-for-dataavailable⑤">(5)</a> <a href="#ref-for-dataavailable⑥">(6)</a> <a href="#ref-for-dataavailable⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pause">
   <b><a href="#pause">#pause</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pause">2.2. Attributes</a>
    <li><a href="#ref-for-pause①">2.3. Methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resume">
   <b><a href="#resume">#resume</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resume">2.2. Attributes</a>
    <li><a href="#ref-for-resume①">2.3. Methods</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>